Background Animations Using MooTools

David Walsh

7 years ago

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.

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 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!