Categories
pCloud Premium

jQuery JavaScript css sprite animation

jQuery JavaScript css sprite animation

For this JavaScript animation we'll use jQuery library , sprite image and little css. Lesson include a demo page which can be downloaded in a zip file with the used image. I hope you'll like this lesson.

First we will look at HTML structure in which we are going to animate:

<div class="birds-path"><div class="birds-position"><div class="birds"></div></div></div>


<div class="birds-path"> is the container in which the other two div blocks will move. It is as wide as the Web browser (width: 100%;)

<div class="birds-position"> is used for two things. One is to hide <div class="birds"> in the begining of the animation.That way we get the effect, in which birds are off the screen and appear gradually. Another is to move horizontally <div class="birds">.

In <div class="birds"> we'll place the birds animation, through which animate the movement of the wings.

CSS

  1. .birds-path.on {
  2. float: left;
  3. height: 61px;
  4. margin: 100px 0 0;
  5. overflow: hidden;
  6. width: 100%;
  7. }
  8. .birds-position {
  9. margin: 0 0 0 -250px;
  10. }
  11. .birds.on {
  12. background: url('/images/birds.png') no-repeat scroll 0 0 transparent;
  13. float: left;
  14. height: 61px;
  15. width: 167px;
  16. }

JAVASCRIPT

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. //ADD CLASS "ON" TO THE DIVS
  4. $('.birds-path').addClass("on");
  5. $('.birds').addClass("on");
  6. //MOVING BLOCK THAT CONTAINTS THE ANIMATION
  7. var pause = 0;
  8. function birds()
  9. {
  10. var element = ".birds.on";
  11. var interval = 27000;
  12. var left = 0;
  13. var away = 150;
  14. if(pause == 0)
  15. {
  16. pause = 1;
  17. $(element).css("margin-left", left + "px").animate({marginLeft: away + "%"}, interval, 'linear', function()
  18. {
  19. $(element).css("margin-left", left + "px");
  20. pause = 0;
  21. birds();
  22. });
  23. }
  24. }
  25. birds();
  26. //BIRDS SPRITE ANIMATION
  27. var recursion = function(toggle)
  28. {
  29. setTimeout(function()
  30. {
  31. switch(toggle)
  32. {
  33. case 1:toggle=0;$(".birds.on").css({backgroundPosition: '-167px 0px'});break;
  34. case 2:toggle=1;$(".birds.on").css({backgroundPosition: '-334px 0px'});break;
  35. case 3:toggle=2;$(".birds.on").css({backgroundPosition: '-501px 0px'});break;
  36. case 4:toggle=3;$(".birds.on").css({backgroundPosition: '-668px 0px'});break;
  37. case 5:toggle=4;$(".birds.on").css({backgroundPosition: '-835px 0px'});break;
  38. case 6:toggle=5;$(".birds.on").css({backgroundPosition: '-1002px 0px'});break;
  39. case 7:toggle=6;$(".birds.on").css({backgroundPosition: '-1169px 0px'});break;
  40. default:toggle=7;$(".birds.on").css({backgroundPosition: '0px 0px'});break;   
  41. }
  42. recursion(toggle);
  43. },80);
  44. }
  45. recursion(0);   
  46. });
  47. </script>

Fourth and fifth lines of the Javascript code add a class "on" in <div class="birds-path"> and <div class="birds"></div>
If browsers Javascript support is not enabled, then the HTML div elements will not load their css and sprite image. If javascript is not supported, we will have no animation, therefore no need for loading items which we'll not use.

From line 7 to 25, we are moving  <div class="birds-position"> horizontally

From row 27 to 45 we are changing the position of the background position cyclically for this block <div class="birds"></div>

Attention! When you create the sprite image in Photoshop or another graphic editor, note that the last frame of your animation must be placed from the left, and the first frame must be on the far right of the picture - in horizontally oriented sprite image. Accordingly, in the vertical sprite image, the last frame must be at the top.

Demo page: here!

With this lesson I've created animation for my 404 error page. You can see it here!

I hope this lesson will be useful for you ico

Download archive6 KBDownloaded 364 times
24 March 2012г.
Viewed 7217 times