Back To School Theme/Animation by JQuery Animation

For creating this type of animation we are going to use HTML5, CSS3 and J Query. In CSS3, I am using transform:scaleX() for moving object from one direction to other.

Used Objects

  • School
  • School Bus
  • KM Sign Board

In HTML, I am using one container <div>. In that container I am going to place five images including School, KM Sign Board (Three Images) and School Bus.

Here's the code for continuously fade in and fade out of an Image

  1. function fadeloop(el, timeout, timein, loop)  
  2. {  
  3.     var $el = $(el),  
  4.         intId, fn = function()  
  5.     {  
  6.             $el.fadeOut(timeout).fadeIn(timein);  
  7.         };  
  8.     fn();  
  9.     if (loop)   
  10.     {  
  11.         intId = setInterval(fn, timeout + timein + 100);  
  12.         return intId;  
  13.     }  
  14.     return false;  
  15. }  
Creating the following code for moving school bus from left to right and right to left
  1. var distanceBall = 0;  
  2. var directionBall = 1;  
  3. document.getElementById('animatedImage').style.top = 10;  
  4. document.getElementById('animatedImage').style.left = 10;  
  5. var timerToggle = null;  
  6. animateBall();  
  7. var setting = 0;  
  8.   
  9. function animateBall()   
  10. {  
  11.     document.getElementById("animatedImage").style.right = (distanceBall - 100) + "px";  
  12.     fadeloop('#christmastree', 8000, 7000, true);  
  13.     distanceBall += directionBall;  
  14.   
  15.     if (distanceBall > window.screen.width - 180)  
  16.     {  
  17.         document.getElementById('animatedImage').style.top = 10;  
  18.         document.getElementById('animatedImage').style.left = 10;  
  19.         directionBall = -1;  
  20.         document.getElementById('img1').className = 'left';  
  21.   
  22.     } else if (distanceBall < 0)  
  23.     {  
  24.         directionBall = 1;  
  25.         document.getElementById('img1').className = 'right';  
  26.   
  27.   
  28.     }  
  29.   
  30.   
  31.     timerToggle = setTimeout(function()  
  32.     {  
  33.         animateBall();  
  34.     }, 0.1);  
  35. }  
Complete JS Code
  1. <script type="text/javascript">  
  2.     function fadeloop(el, timeout, timein, loop)  
  3. {  
  4.         var $el = $(el),  
  5.             intId, fn = function()  
  6.         {  
  7.                 $el.fadeOut(timeout).fadeIn(timein);  
  8.             };  
  9.         fn();  
  10.         if (loop)   
  11.         {  
  12.             intId = setInterval(fn, timeout + timein + 100);  
  13.             return intId;  
  14.         }  
  15.         return false;  
  16.     }  
  17.     var distanceBall = 0;  
  18.     var directionBall = 1;  
  19.     document.getElementById('animatedImage').style.top = 10;  
  20.     document.getElementById('animatedImage').style.left = 10;  
  21.     var timerToggle = null;  
  22.     animateBall();  
  23.     var setting = 0;  
  24.   
  25.     function animateBall()   
  26. {  
  27.         document.getElementById("animatedImage").style.right = (distanceBall - 100) + "px";  
  28.         fadeloop('#christmastree', 8000, 7000, true);  
  29.         distanceBall += directionBall;  
  30.   
  31.         if (distanceBall > window.screen.width - 180)  
  32.         {  
  33.             document.getElementById('animatedImage').style.top = 10;  
  34.             document.getElementById('animatedImage').style.left = 10;  
  35.             directionBall = -1;  
  36.             document.getElementById('img1').className = 'left';  
  37.   
  38.         } else if (distanceBall < 0)  
  39.         {  
  40.             directionBall = 1;  
  41.             document.getElementById('img1').className = 'right';  
  42.   
  43.   
  44.         }  
  45.   
  46.   
  47.         timerToggle = setTimeout(function()  
  48.         {  
  49.             animateBall();  
  50.         }, 0.1);  
  51.     }  
  52. </script>  
HTML
  1. <div>  
  2.     <div class="topwrap1" style="position: fixed; width: 100%; bottom: 0;">  
  3.         <div>  
  4.             <div class="wrap">  
  5.                 <div id="christmastree" style="position: fixed; padding-top: 550px; z-index: 99; left: 1px; bottom: 0;">  
  6.                     <img id="img2" src="Images/school19.gif" alt="School" />  
  7.                 </div>  
  8.                 <div style="position: fixed; padding-top: 550px; z-index: 99; left: 1072px; bottom: 0;">  
  9.                     <img src="Images/download.png" alt="KM Sign Board" style="height:50px;" />  
  10.                 </div>  
  11.                 <div style="position: fixed; padding-top: 550px; z-index: 99; left: 745px; bottom: 0;">  
  12.                     <img src="Images/download.png" alt="KM Sign Board" style="height:50px;" />  
  13.                 </div>  
  14.                 <div style="position: fixed; padding-top: 550px; z-index: 99; left: 422px; bottom: 0;">  
  15.                     <img src="Images/download.png" alt="KM Sign Board" style="height:50px;" />  
  16.                 </div>  
  17.                 <div id="animatedImage" style="position: fixed; padding-top: 550px; z-index: 99; left: 1px; bottom:0;">  
  18.                     <div class="santa">  
  19.                         <img id="img1" src="Images/school22.gif" alt="School Bus" style="height:58px;" />  
  20.                     </div>  
  21.                 </div>  
  22.             </div>  
  23.         </div>  
  24.     </div>  
  25. </div>  
CSS
  1. #img2  
  2. {  
  3.     height: 100 px;  
  4. }  
  5.   
  6. .santa   
  7. {  
  8.     background - size: 240 px;  
  9.     background - position - y: 30 px;  
  10.     padding - top: 0 px;  
  11.     right: 0;  
  12.     text - align: right;  
  13.     bottom: 0;  
  14. }  
  15.   
  16. .left  
  17. {  
  18.     -ms - transform: scaleX(1); - moz - transform: scaleX(-1); - o - transform: scaleX(-1); - webkit - transform: scaleX(-1);  
  19.     transform: scaleX(-1);  
  20.     filter: FlipH; - ms - filter: "FlipH";  
  21. }  
  22.   
  23. .right   
  24. {  
  25.     -ms - transform: scaleX(-1); - moz - transform: scaleX(1); - o - transform: scaleX(1); - webkit - transform: scaleX(1);  
  26.     transform: scaleX(1);  
  27.     filter: FlipH; - ms - filter: "FlipH";  
  28. }  
  29.   
  30. .topwrap1  
  31. {  
  32.     color: #777;  
  33. padding: 0;  
  34. margin: 0;  
  35. height: 165px;  
  36. margin: auto auto;  
  37. vertical-align: middle;  
  38. }  
  39.   
  40. .wrap   
  41. {  
  42. width: 95%;  
  43. min-width: 1150px;  
  44. max-width: 1200px;  
  45. margin: 0 auto;  
  46. text-align: left;  
  47. }  
  48.   
  49. body  
  50. {  
  51. margin: 0;  
  52. }  
Final Output

output

Guys, herewith I am attaching souRce code. Keep exploring!
Ebook Download
View all
Learn
View all