Have you ever wondered how to create cool animations for your website? Nowadays it's so easy. We have choice of several options. Flash time is almost gone, we can create animations a better way today. They can be done using pure CSS3, we can animate SVG's using JS or CSS3 and we can use spritesheets. Animated SVG's might be a subject for another article. So in this article I focus on spritesheets.

Spritesheets are not new, they are often used by game developers. If you don't know how spritesheet works, watch this video : http://www.codeandweb.com/what-is-a-sprite-sheet.

How to use spritesheets?

First of all we have to design our own spritesheet. I have created for this article the easy one indeed. It contains just about five frames. Yeah, the result won't be very smooth. For really smooth animations we have to create spritesheets with more frames (it's normal that spritesheets contains more then 20 frames). With more frames grows size of the spritesheet so we have to find compromise between final size and number of frames. Width of my spritesheet is 1000px, each frame has 200x200px. Let's do it.

Create easy HTML structure that contains div with classes "animated body".

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>

    <div class="animated body"></div>

</body>
</html>

Website can contain more than one spritesheet animation. Each animation has it's own number of frames, frame size and speed. Let's use HTML data attribute to store those information.

<div class="animated body" data-animation-frames="5" data-frame-size="200" data-animation-speed="200"></div>

That's all from HTML part. Now create easy CSS style. Each frame has 200x200px and first frame is located starts at 0px,0px.

.body{
    background:url(gfx/spritesheet.png);
    background-position: 0px 0px;
    width:200px;
    height:200px;
}

I've decided to control all animations using jQuery but I know, you might not need jquery, right?. It's easy to rewrite it in pure JS.

Let's go through each animation in code.

$(document).ready(function(){

    $(".animated").each(function(){

        //do something...

    }

});

As I said recently, each animation has it's own speed, number of frames and frame width. Those information are stored in HTML data attributes. We also need actual position so we can determine which frame is next. Let's get those information.

var animation = $(this);
var speed = parseInt($(this).attr("data-animation-speed"));
var frameSize = parseInt($(this).attr("data-frame-size"));
var frames = parseInt($(this).attr("data-animation-frames"));
var lastPosition = (frames*frameSize)-frameSize;

Now we have everything we need to make our animation move. I'm going to use JS function setInterval.

setInterval(function(){

    var actualPosition = animation.css("background-position").split(' ');
    positionX = -1*(parseInt(actualPosition[0]));

    // if we are on last frame, show first frame
    if(lastPosition > positionX){
        animation.css("background-position",-1*(positionX+frameSize)+"px 0px");

    }
}, speed);

And that's all. Examples are available here: animation example, multiple animations

Of course, code mentioned in this article is not production-ready but I hope it'll give you a basic knowledge about how to use spritesheets on your websites.

If you have question, idea or you just want to say hello, don't wait and contact me at filip@bartos.me or use @filipbartos.