Категории
pCloud Premium

jQuery JavaScript css sprite анимация

 jQuery JavaScript css sprite анимация

За тази JavaScript анимaция ще използваме jQuery библиотека, една sprite картинка и съвсем малко css. Урока съдържа и демо страница, която може да свалите и в zip файл с използваната картинка. Надявам се урока да ви хареса.

 

 

 

Първо ще разгледаме HTML структурата в която ще анимираме:

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


<div class="birds-path"> e контейнера, в който се движат другите два div блока. Той е широк толкова, колкото е широк и уеб браузъра (width:100%;)

<div class="birds-position"> е използван за две неща. Едното е да скрие <div class="birds"> в началото на анимацията. Така имаме ефект, при който птиците са извън екрана и се появяват постепенно. Другото е да придвижва хоризонтално <div class="birds">.

В <div class="birds"> извършваме css sprite анимацията, чрез която анимираме движението на крилете.

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>

Четвърти и пети ред от Javascript кода имат задачата да добавят клас/class "on" на <div class="birds-path"> и <div class="birds"></div>
Ако Javascript поддръжката на браузъра не е активирана, тогава HTML div елементите няма да заредят своя css и sprite картинката. Ако javascript не се поддържа, няма да имаме анимация, съответно няма нужда от зареждането на елементи, които няма да използваме.

От ред 7 до 25, задвижваме хоризонтално  <div class="birds-position">

От ред 27 до 45, циклично променяме фоновата позиция на <div class="birds"></div>

Внимание! Когато създавате sprite картинката в Photoshop или друг графичен редактор, имайте в предвид, че последния кадър от анимацията ви трябва да започва от ляво, като първия кадър да е в дясната част на картинката - при хоризонтално ориентирана sprite картинка. Съответно при вертикална sprite картинка, последния кадър трябва да е в горната част.

Демо страница: тук!

Чрез този урок създадох и анимацията за моята 404 error страница. Нея можете да видите тук!

Надявам се урока да ви е бил полезен ico

Изтегли архива6 KBИзтеглено 364 пъти
24 Март 2012г.
Прегледано 5232 пъти