jQuery Sprite Animation Tutorial

Here is a simple method of jQuery Sprite Animation. I also tie it to a parallax scrolling effect. The methods you see here will be easily adaptable and transferable to any application.

I previously wrote a post on simple jQuery parallax scrolling. I will use the same method here for the parallax scrolling and extend it to add the animation.

See the DEMO or DOWNLOAD the files.

I have 2 sprites that I will be animating; one of a bird and one of a kangaroo. The sprites each contain 3 frames of animation of which you only show one at a time. To achieve the effect, we need to reposition the background image of the sprite at the appropriate time to create the effect that the object is moving. Due to the way these animals move, they need to be worked in slightly different ways.

This is what the sprites look like. Notice the 3 “frames” in each:

  

Here is the HTML.

<div class="bgWrapper"></div>
<div class="bgBird"></div>
<div class="bgRoo"></div>
<div class="mainWrapper"><!-- --></div>

here is the CSS

.bgWrapper{
	position:fixed;
	background:url(bg.jpg) top center no-repeat; 
	height:100%; 
	width:100%; 
	top:0; 
	left:0;
}
.bgBird{
	position:fixed;
	background:url(bg-bird.png);
	width:171px; 
	height:70px; 
	left:50%; 
	margin-left:-800px;
	margin-top:300px;
}
.bgRoo{
	position:fixed;
	background:url(bg-roo.png);
	width:225px;
	height:239px;
	left:50%;
	margin-left:250px;
	margin-top:400px;
}

and the jQuery:

$(document).ready(function(){
	$(window).bind('scroll',function(e){
   		parallaxScroll();
   	});
 
   	//We use these presets for the bird animation
   	var ScrollCount = 1;
   	var wingDirection = 'down';
 
   	function parallaxScroll(){
   		var scrolledY = $(window).scrollTop();
 
		//to move the background slowest (as this is the "furthest" away from you)
		$('.bgWrapper').css('background-position','center -'+((scrolledY*0.1))+'px');
 
		//To move the Kangaroo object in accordance with the scroll. 
	   	//We create the "bounce" effect by adjusting the 'top' value in along a sine wave
		$('.bgRoo').css('top',''+((Math.sin(scrolledY/30)*40)+(scrolledY*0.1)+'px'));
 
		//We adjust the left margin to move the kangaroo from right to left
	   	$('.bgRoo').css('margin-left',(250+(scrolledY*.5))+'px');
 
		//To animate the kangaroo to simulate it's legs compressing at the bottom of the jump
		if ((Math.sin(scrolledY/30)*40)&gt;37){
			$('.bgRoo').css('background-position','0px -478px');
		} else if ((Math.sin(scrolledY/30)*40)&gt;25){
			$('.bgRoo').css('background-position','0px -239px');
		} else {
			$('.bgRoo').css('background-position','0px 0px');
		};
 
		//To move the Bird object in accordance with the scroll
		//We adjust the top and margin-left values in accordance with the scroll to move the bird up and down
		$('.bgBird').css('top','-'+((scrolledY*0.4))+'px');
		$('.bgBird').css('margin-left',(-800+(scrolledY*0.2))+'px');
 
		//To animate the bird sprite. 
		//Note: I am only changing "frames" every 3rd pixel of scroll. Otherwise the wings appear to move too quickly
		//You can adjust this to make animation move faster or slower
		if (ScrollCount == 3){
			ScrollCount = 1;
			if ($('.bgBird').css('background-position') == '0px 0px'){
				wingDirection = 'down';
				$('.bgBird').css('background-position','0px -70px');
			} else if ($('.bgBird').css('background-position') == '0px -70px'){
				if (wingDirection == 'down'){
					$('.bgBird').css('background-position','0px -140px');
				} else {
					$('.bgBird').css('background-position','0px 0px');
				}
			} else {
				wingDirection = 'up';
				$('.bgBird').css('background-position','0px -70px');
			}
		}
 
		ScrollCount++;
 
   	}
 
});

Note: I a got a leg up for the sprite animation from a blog post that I came accross at tonylea.com (http://www.tonylea.com/2012/animating-a-sprite-with-jquery/ – well worth checking out).