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).

Did you like this post? Why not subscribe?

11 thoughts on “jQuery Sprite Animation Tutorial

  1. Hi, Thank you for this tutorial it has been a great help for me. Im trying to animate a sprite on scroll, but I need to do a loop, can you guide me a bit in how to do this. I have been fiddling with your code but cant make it work. Your code does this: img1 – img2 – img3 – img2 – img 1 etc.. I need to do this: img1 – img2- img3 – img4 -img5 – img6 – img1 – img2 – img3 – etc… Do you think its something doable?? Thanks a lot!!

    • Hi Diego,

      Yes you can do something like that very simply by putting your frame positions in an array and cycling through it like so (I’ve not tested this but the logic is there):

      var framePositions=new Array(“0px 50px”,”0px 100px”,……..);
      var numberOfFrames = framePositions.length;
      var currentFrame = 0;
      if (ScrollCount == 3){
      ScrollCount = 1;
      $(‘.bgBird’).css(‘background-position’,framePositions[currentFrame]);
      currentFrame++;
      if (currentFrame > numberOfFrames){
      currentFrame = 0;
      }

      }
      scrollcount ++

      Cheers!

      Fraser

  2. Wow thank you very much for your fast response and your help.

    I tried with the code but i think im doing something wrong with this line: var framePositions= new Array(“0px 0px”,”0px 240px”,“0px 480px”,”0px 720px”,“0px 960px”,”0px 1440px”,“0px 0px”,”0px 1680px”);

    Because the old script stopped working (the birds and kangaroo animation), and if I erase it the old animation works again (still not the loop im trying to make)

    Thanks again

    • No problem.

      It may simply be an issue with the quotes. The comment box on the blog replaces them with “word” style quote marks, so if you copied it straight out of the comment, try replacing these with raw quotes and you should be fine.

      Let me know how you get on.

      Cheers

  3. Excellent worked perfect!! thank you very much! Im a beginner at programming as you can see 😛

    I´ll show you the site once its done and give your credits. Thanks again!

    • Glad I could help :)

      I look forward to seeing the final work.

      We all start out as beginners. It still blows my mind how much I have left to learn.

      Good luck!

      Cheers
      Fraser

    • Thank you. I can’t take all the credit though. The idea came about in discussions with a client at my previous job. I suggested a simple parallax background and he asked if anything could be done to animate them so I put my head to it and came up with this. It can be seen in action here realaussieadventures.com/

  4. Hi!
    Very nice and interesting tutorial!
    I find it very useful. I also want to ask you a question! I would like to do something similar with: http://benthebodyguard.com/index.php but instead of a straight path, I have a path with curves!
    And the sprites must be able to be animated on scroll!
    Any suggestions or thoughts will be appreciated!
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *