Background Animations Using MooTools
One of the sweet effects made easy by javascript frameworks like MooTools and jQuery is animation. I ran across
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.
Don’t forget to
Related posts:
View full post on David Walsh :: PHP, CSS, MooTools, jQuery, and Everything Else
No related posts.
Loading ...
awesome look, though i can see some people going overboard with this.
What? No Parallax effect?
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