O'Reilly

Background Animations Using MooTools

By on  

Updated 4/25/2011: The background animation has been updated to work well with Internet Explorer 7 and 8, and more efficiently with every other browser. This was accomplished by adding the wait property to the animation, and using an initial setStyle assignment to work around an IE8 background-position bug.

MooTools background animation

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-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 MooTools 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,
		link: "cancel"
	});
	
	// Starts the initial run of the transition
	run();	
});

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.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • Google-Style Element Fading Using MooTools or jQuery

    Google recently introduced an interesting effect to their homepage: the top left and top right navigation items don't display until you move your mouse or leave the search term box. Why? I can only speculate that they want their homepage as...

  • Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

Discussion

  1. senshikaze

    awesome look, though i can see some people going overboard with this.

  2. Steven Schrab

    What? No Parallax effect? :P

  3. 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…

  4. cake

    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

  5. @cake
    There is a plugin for mootools called mparallax, but its developer’s website (Piksite.com) is down for some reason….

  6. 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.

  7. @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…

  8. 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?

  9. I agree with Paul Winslow…fading background images into each other would make an awesome experiment!

  10. Hello David!

    Great thanks for your acceptance for the work ! Your are Cool!

    Regards!

    Kepler

  11. 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.

  12. Richard

    Great work indeed!

  13. Amos

    Wouldn’t it be a lighter and simpler solution to have a GIF image instead?

  14. derdummkopf

    sorry david,

    ie7 shows no animation

  15. 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

  16. Hi David,

    IE 8 = no animation :-(

    greetings
    chris

  17. Roark

    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

  18. Roark

    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

  19. tim_keffer

    Hello,
    I get where the background: coding goes, but where does the the action content lay in??

    Thank you !!

  20. George Felix

    Hello, im test this script running Version 1.11 under ie8 but have error push is null, maybe anybody know solution?

    Thanks in advance. =)

  21. Chris TC

    I tried this code successfully with a background positioned on top of a div, but when i try position it on bottom, it seems like the code make it go up little by little, funny but... wasn't really expected. Is there a way to correct this effect ?

  22. Andy

    oncomplete: run is a very clever way to do it, nice! I would have gone with some nasty settimeout solution.

  23. For everyone asking for parallax, it’s very simple. I’ve put the functions into a class to make this easier:


    bgScroller = new Class({

    Implements: [Events, Options],

    options: {
    duration: 40000
    },

    tweener: null,
    length: 0,
    count: 0,
    verticalPosition: null,

    run: function() {
    this.tweener.tween('background-position', ('-' + (++this.count * this.length) + 'px ' + this.verticalPosition));
    },

    initialize: function(element, options){
    this.setOptions(options);
    this.tweener = element;
    this.length = this.tweener.getSize().x;
    this.verticalPosition = this.tweener.getStyle("background-position").split(" ")[1];
    this.tweener.setStyle("background-position", ("0px " + this.verticalPosition));
    this.tweener.set('tween', {
    duration: this.options.duration,
    transition: Fx.Transitions.linear,
    onComplete: this.run.bind(this),
    wait: false
    });
    this.run();
    }

    });

    Then all you have to do is set separate instances of the class to each layer:


    window.addEvent("domready", function() {
    var frontScroller = new bgScroller($("front"), { duration: 9000 });
    var middleScroller = new bgScroller($("middle"), { duration: 85000 });
    var backScroller = new bgScroller($("back"), { duration: 55000 });
    });

    • This is great Brad, but I had a small mistep in my original code. wait: false should be link: "cancel"

    • Ah, yes, I see. Easy mistake, since wait is part of the MooTools system. It’s just an extra for Class.chain.

      Feel free to edit that into my comment.

      I put together a demo, but I won’t be able to get it online until later.

  24. Hello I need help getting the background. I use a joomla template and I am not able to.
    To place the image to and no problem.
    But do not get it to move.
    I use CSS file.

  25. Cheta

    Can’t make it to work with IE 7,8 9 . Works fine with chrome and ff. IE gives error that object doesn’t support the property.. Please help me ..

  26. Toadward

    Hi David,

    thanks for the tutorial, it’s great.

    A little problem is the use of “(++count * length)” to define the tweening target. As this runs endless some desktop browsers are stopping the animation effect after some minutes.
    I think it would be better to set the target to “length” and reset the background-position in the “run” function.

  27. anand

    hello!
    Thanks for the tutorials.
    I am looking for codes of js,html5,css3 without flash for the same animation. (I mean i want to make a animation with 3 languages) Can anybody please help me? thanks in advance.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...