Background Animations Using MooTools
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.
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.
DEMO
source article : Background Animations Using MooTools
Tags: Mootools
Subscribe to:
Post Comments (Atom)
Share your views...
6 Respones to "Background Animations Using MooTools"
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools
Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton
of engaging advice and insight into front-end technologies. Even more obvious is his passion
for open source contribution and trial-and-error development, making his blog one of the
most honest and engaging around.
Website: davidwalsh.name
March 13, 2019 at 4:34 AM
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
March 15, 2019 at 12:04 AM
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
March 20, 2019 at 9:31 PM
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
March 27, 2019 at 1:16 AM
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
March 27, 2019 at 11:33 PM
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
April 2, 2019 at 12:45 AM
Post a Comment