jQuery & CSS Sprite Animation Explained In Under 5 Minutes

Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screencast I’m going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites. You’ll also get to see some pretty cool out-in-the-wild examples of jQuery Sprite Animation in action, so why not check it out in my screencast below!

Demos and text are available for anyone that wants to read/see them in the rest of the post.

View Demo  Download Source

Today’s animations are created using a really useful jQuery plugin called Spritely. You can download the Spritely plugin here. Spritely allows you to create your own animations using two simple functions.The pan() function which lets you pan (move) an image across the screen in a particular direction; and the sprite() function which lets you work with multiple frames and add more complex behaviours to your animations. In the screencast I show you how to first use pan() to create a moving silhouette of a city and then we use the sprite() function to add an animated plane to it. To help you with your own creations, I’m including code for both of these below.

Basic Example using Pan()

How complex your animations can get really depend on what you’re trying to achieve. If you’re trying to create a moving landscape scene, you’ll probably be able to knock that out fairly quickly because all you need to do is pan your images across the screen at a particular speed.

Here’s the sample code I used to create the city skyline panning effect:

The jQuery

			$(document).ready(function() {
				$('#city').pan({fps: 30, speed: 2, dir: 'left'});
				});

The HTML

The CSS

		body {
			background: #fff;
			margin:0 auto;
		}
		/*City Silhouette*/
		#city {
			position: absolute;
			width: 99%;
			height: 416px;
			background: transparent url(city.png) 0 130px repeat-x;
			border: 1px solid black;
		}

Advanced Example Using Pan() & Sprite()

If however you’d like to create something a little more detailed like a 2D or 3D character with movement, you’ll need to use a package like Maya, 3DMax or even Flash to output the animation as frames with a transparent background. Next, follow my steps below to create the jQuery animation for it.

1. Output your frames as transparent PNG files to a directory on your drive. Because animation can sometimes be a memory intensive task, you’ll want to minimize this as much as possible. This can be achieved by outputting 1 frame for every 5-15 in your original animation. Don’t worry! The Spritely plugin supports setting custom frame-rates so you can still make your final animation look relatively smooth.
2. Use a Sprite Generation tool such as CSSSprit.es or CSSSprites.com to stitch your frames together as a single image file. Try to keep the final filesize down to within a few megabytes (I would say 2MB should really be the higher end of that filesize).
3. Next animate your content using Spritely as I did in my demo. You can find some sample code for this below.

The jQuery

  (function($) {
			$(document).ready(function() {
			    /* City 1 */
				$('#city1').pan({fps: 30, speed: 1, dir: 'right'});
				/* City 2 - This gives the animation a depth of perspective
				as one city silhoette is slightly away from the other*/
				$('#city2').pan({fps: 30, speed: 2, dir: 'right'});
				/*The clouds and sky*/
				$('#sky').pan({fps: 30, speed: 0.5, dir: 'right'});
				/*The Plane animation*/
				var stage_left = (($('body').width() - 866) / 2);
				var stage_top = 30;
				/* Spritely's sprite function allows you to define
				more complex animations which contain more than 1
				frame. You can also use the spRandom feature to define
				random behaviour.
				*/
				$('#plane1').sprite({fps: 8, no_of_frames: 14})
					.spRandom({
						top: 40,
						left: stage_left + 20,
						right: 400,
						bottom: 140,
						speed: 3500,
						pause: 1000
					});
			});
		})(jQuery);
  

The HTML

The CSS

			body
			{
			background: #fff;
			margin:0 auto;
		     }
		#sky {
		  position:absolute;
		  width:100%;
		  height: 416px;
		  background: transparent url(sky.jpg) 0 0px repeat-x;
		}
		#city {
			position: absolute;
			width: 100%;
			height: 416px;
			background: transparent url(city.png) 0 130px repeat-x;
		}
		#city2 {
			position: absolute;
			width: 100%;
			height: 416px;
			background: transparent url(city2.png) 0 130px repeat-x;
		}
		#plane1 {
			position: absolute;
			width: 730px;
			height: 167px;
			background: transparent url(planesprite.png) 0 50px no-repeat;
		}
		#content {
		   width: 100%;
		   position:relative;
		   clear:both;
		}
		#leftcontent {
		  width:70%;
		}
		#rightcontent {
		  width:30%;
		  background-color:blue;
		}

And thats it!. As with all my ‘Under 5 Minutes’ series, you obviously won’t have learned absolutely everything there is to know about sprite animation, but hopefully you will have picked up many of the basics. Please feel free to download the source files and play around with them – I hope they come in useful!

Demo & Download

View Demo  Download Source

Conclusion

This tutorial was created to demonstrate how to create animations in jQuery using sprites. This powerful technique is a simple, effective way of creating cross-browser friendly animations that don’t need to rely on Flash or any third-party plugins to function. To see more demos of how Spritely is being used to add rich animated experiences to web pages, feel free to have a look at the Spritely gallery here. If you enjoyed today’s post, please share it with your friends and colleagues by clicking jQuery & CSS Sprite Animation Explained In Under 5 Minutes