Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a 'sprite' image contains two or more 'frames' of animation, whereas a 'pan' image contains a continuous image which pans left or right and then repeats.

Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won't look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element.

Quick Start

If you're impatient to try out Spritely and want to see some self-contained working examples, you can download some sample code as a zip file.

Animation an image with the Sprite() Method

Here's a quick example to get you started... The following method animates one of the bird 'sprites' flying around this page. The 'sprite' is composed of three frames in a transparent png image, where each frame is side by side:

Now we simply need to create a div called 'bird', style it to exactly the correct size (180x180 pixels in this case), and animate it with the sprite() method. The two options we need to use are 'fps' (frames per second) and 'no_of_frames', e.g. three frames for the above image:

$('#bird').sprite({fps: 12, no_of_frames: 3});

To make the mouse attract the sprite when you click the screen, use this:

$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();

The active() method makes this sprite the active sprite on launch - otherwise a sprite with activeOnClick() becomes active only when you click it (or touch it using an iPhone/iPad).

The $('body').flyToTap() method watches for a click on the page at which point, after any current move is complete, the sprite moves to the clicked location. After a few second, if a random movement method has been applied (see below), it then moves away again.

To make the sprite move in a random way, within pixel constraints (speeds are in milliseconds), use this:

$('#bird')
      .sprite({fps: 8, no_of_frames: 3}
      .spRandom({
          top: 70,
          left: 100,
          right: 200,
          bottom: 340,
          speed: 4000,
          pause: 3000
      });

Panning a background image with the PAN() method:

Here's how you can 'pan' a background image, like the hills in the demo at the top of this page.

To make the background image pan continually to the left, create an html div element smaller than the image itself and use css to place your image as the background image, making sure you set the background image repeat to 'repeat-x', e.g. it repeats continuously in the horizontal axis.

Now animate it with spritely's 'pan()' method:
$('#trees').pan({fps: 30, speed: 2, dir: 'left'});

You can adjust the speed (pixels per frame) and frames per second independently of one another. Why? Because a lower speed will result in a smoother pan, however a higher frames per second may result in slower performance (especially on devices like iPhone). You'll need to experiment to get the right balance between smooth animation and page performance.

To layer background images over each other, simply place the html images below each other, or adjust the 'z-index' css property, then set the fps and speed properties to give the illusion of depth. A more distant background image should move more slowly (lower fps) than a close-up one.

One Final Point:

Use Spritely sparingly. A little Spritely goes a long way, but over-ambitious use of these techniques may lead to poor performance, especially on mobile devices. A little movement on a large page may be better than a lot of movement on a small one.

For more examples, read the source code of this page!

Live Demo jquery Sprite Animations

Download jquery Sprite Animations

Leave your comments