Background Animations Using MooTools

Tweet

One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. Here's a quick MooTools code snippet that shows how you can add animating a background image to any element on a page.

The CSS

#animate-area { 
 background-image:url(clouds.png);
 background-position:0px 0px;
 background-repeat:repeat-x;
}

The first step is assigning the image as a background image for our given container. Be sure to repeat the background horizontally!

The HTML

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js" type="text/javascript">
</script>
<script type="text/javascript">
  window.addEvent('domready',function() {
   //settings
   var duration = 40000;
   var length = 2000;
   var count = 0;
   
   var tweener;
   
   // Executes the standard tween on the background position
   var run = function() {
    tweener.tween('background-position','-' + (++count * length) + 'px 0px');
   };
   
   // Defines the tween
   tweener = $('animate-area').setStyle("background-position","0px 0px").set('tween',{ 
    duration: duration, 
    transition: Fx.Transitions.linear,
    onComplete: run,
    wait: false
   });
   
   // Starts the initial run of the transition
   run();
   
  });
</script>

The first step, as always is getting our settings ready for the show. The next piece is putting the animation function in place. We increment the negative background left position counter calculation to keep the show rolling. Last step is playing the show!

Make sure the animation speed is very slow and subtle -- a rapid background speed could make your users pass out. On the other hand, implementing it tastefully will make your website unique.

source article : Background Animations Using MooTools

Share this article: