Background Animations Using MooTools
One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. I ran across this great jQuery tutorial that walks you through animating a background image of a page. Here's a quick MooTools code snippet that shows you how you can add this sweet effect to any element on a page.
The CSS
#animate-area { background:url(bg-clouds.png) 0 0 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 MooTools JavaScript
window.addEvent('domready',function() {
//settings
var duration = 5000;
var length = 2000;
var count = 0;
var tweener = $('animate-area').set('tween',{ duration: duration, transition: 'linear' });
//showtime!
var run = function() {
tweener.tween('background-position','-' + (++count * length) + 'px 0px');
};
run();
run.periodical(duration);
});
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.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
awesome look, though i can see some people going overboard with this.
What? No Parallax effect? :P
This seems cool but may difficult to successfully implement into an effective design. It seems quite limited as well but don’t get me wrong, it’s a great way to animate a background with the simplicity of moo tools. I would suggest looking at snapjay.com and the code be hide it at code.snapjay.com…
Hi,
nice work. Could you convert sich special nice effect from jQuery to Mootools. This is an awesome effect.
http://webdev.stephband.info/parallax.html
@cake
There is a plugin for mootools called mparallax, but its developer’s website (Piksite.com) is down for some reason….
I’ve been meaning to look into fading background images from one-to-another with jquery/mootools.. don’t suppose you’d be willing to show how that’d work? Cheers, David.
@Paul Winslow:
Paul you should check the site I provided above: code.snapjay.com
You may find that jquery useful, but on snapjay.com he uses a background fader. I will be writing a article on this later tonight. I will let you know…
Hi David! Cool to see this work in Mootools! I’m using a Jquery version of this on my company site (Mediashake.nl). Works pretty good, but I wish I could save it’s state so the clouds won’t restart for each new page or refresh… any idea’s?
I agree with Paul Winslow…fading background images into each other would make an awesome experiment!
Hello David!
Great thanks for your acceptance for the work ! Your are Cool!
Regards!
Kepler
Nice sample, parallax version would be nice too ;-)
To bad that subpixel movment is not possible (is it?), for slow & smoother animations. Can´t wait until Canvas is possible on everyone’s browser.
Great work indeed!
Wouldn’t it be a lighter and simpler solution to have a GIF image instead?
sorry david,
ie7 shows no animation
I agree that you want the animation subtle. This is after all the header and not the main content. I have an animated cloud on my site. This is a link to the site with the animated cloud and also a tutorial….
http://blog.bobcravens.com/2009/07/05/jQueryAnimation.aspx
Hi David,
IE 8 = no animation :-(
greetings
chris
Hi David!
Great tutorial as usual…
Please would you give me a hand in 1.11′a fying this code? Joomla! 1.5 as you may know uses the older library so when I create a Joomla site I need to use 1.11 compatible code.
Any help would be greatly appreciated!
Thanks
Roark
Well I’m giving it a bash myself and I’m nearly there just having a problem with timing, the tween finishes then there is a pause (about the same time as the tween) then the tween runs again.
//for version 1.11
var duration = 5000;
var length = 30;
var count = 0;
var fx = new Fx.Style($(‘bannerwrap’),’background-position’, {duration: duration, transition: Fx.Transitions.linear});
//showtime!
var run = function() {
fx.start(‘-’ + (++count * length) + ‘px 24px’);
};
run();
run.periodical(duration);
Damn I’m good… :)
window.addEvent(‘domready’,function() {
//settings
var duration = 5000;
var length = 2000;
var count = 0;
var fx2 = new Fx.Style($(‘bannerwrap’),’background-position’, {duration: duration, transition: Fx.Transitions.linear, wait:false});
//showtime!
var run = function() {
fx2.start(‘-’ + (++count * length) + ‘px 24px’);
};
run();
run.periodical(duration);
});
You feel better when you do it yourself, only lost a couple hours getting it right.
damn ‘wait’ option
Hello,
I get where the background: coding goes, but where does the the action content lay in??
Thank you !!