permalink

77

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

77 Comments

  1. Pingback: jQuery & CSS Sprite Animation Explained In Under 5 Minutes … | My Blog

  2. There is a subtle, funny side-effect to this demo. Periodically, a horizontal scrollbar appears in which you can scroll a little right and expose a blank section on the right side of the image. The scrollbar grows a little and then disappears. But then it shortly comes back. I tried in both IE and Chrome and see the same thing. Start the demo and just be a little patient and you will soon see what I mean.

  3. thanks for the lesson :). the info in the article and clips is very informative one.
    to Scott – have you checked is in Firefox? maybe i wasn't attentive but i didn't ntoiced anything strange.

  4. Pingback: 35 jQuery Animation Tutorials | iPixel Creative | Singapore Web Design & CMS Development Company Blog

  5. Pingback: 35 jQuery Animation Tutorials » abdie.web.id

  6. Pingback: بیش از ۳۰ خود آموز عالی در زمینه حرکت و انیمیشن در جی کوئری | پارسه آی تی

  7. Pingback: 35 Tutoriales de animaciones en jQuery | Recursos para Diseñadores Gráficos y Web | Creativos Online

  8. Pingback: 35 Tutoriales de animación con jQuery | Valiomadres

  9. Pingback: 35 jQuery Animation Tutorials

    • Great work!. I've actually seen quite a few people having tried their hand at sprite animation before frameworks came about and it must have taken you quite a bit of effort to complete it. This is definitely an area that was covered back in the old days but it's also one that's been quite inaccessible to the average developer before the introduction of frameworks and plugins that allow you to remove much of the manual coding work from the process. I think thats the main benefit.

  10. Pingback: بیش از ۳۰ خود آموز عالی در زمینه حرکت و انیمیشن در جی کوئری | ايروني ها

  11. Pingback: travel around world » 35 jQuery Animation Tutorials

  12. Pingback: Weekly Good Tweets – 07.19 – 07.24 « Tutvid News

  13. Thanks for the tutorial…its very nice…can u elaborate the jquery files…i mean the programming code in the files…..

  14. Pingback: jQuery tuts en inglés | gorkaerrea.com | diseño bilbao

  15. Does anyone know anywhere you can download the images to use for this kind of animation, like the bird or the gopher? (ie three or four pictures that create a moving image when flipped through)?

    • You can either create them yourself (it doesn\’t really take that long! : )) or there are a few places they can be picked up if you\’re looking for something pre-rendered.

      Example: If you\’re after 3D content, look for Maya or Flash animations where you can export single frame content and manage how many frames you want to include in your final piece.

      Remember that for sprite animation of this type, the most difficult thing really is going to be handling the transparency because there aren\’t a huge number of packages which support exporting with a solid transparent background (this can be overcome by exporting a solid color (eg pink) background and then removing the color in PhotoShop or Fireworks later).

      Alternatively, if you\’re looking for something simple, searching for animated GIF files and exporting selected frames from there that you want to work with can also be done (and those often already have the transparency in there, but you\’re limited to color palettes).

    • Hey!. Yes it is. You can either do this the semantically create way by defining a link area within the plane itself or if you wanted to opt for something that lets you click the entire object you could opt for attaching a handler to a click() event which would also provide this functionality.

  16. hey is it possible to call a jquery animation function based on an value obtained from a js function. Can I activate jquery on 10th click of a given link
    please tell me how to do these??
    I need help not very good with coding

  17. Pingback: 20+ fresh jQuery Animation Tutorials | Free Resources for Designers & Developers

  18. Pingback: make awesome web » jQuery & CSS Sprite Animation Tutorial

  19. Pingback: Reserach project « ART342~S11

  20. Pingback: Fish XL » Blog Archive » jQuery & CSS Sprite Animation Explained In Under 5 Minutes - Here is what I saw today …

  21. Pingback: Animating with jQuery and CSS – how to – Animation jQuery – Sprites | Ajaxor

Leave a Reply

Required fields are marked *.