Use Mootools for background effects

The parallax background scroller popularised by Nike's Better World and other similar sites has recently been implemented by Google on their Nexus 7 microsite in a nice subtle way. So, we thought we'd have a go at replicating the functionality using MooTools and CSS ourselves.

The parallax effect itself

Using the Nexus 7 page as an example, when scrolling down the page the breaker images scroll at a slower speed than the rest of the page creating a nice subtle illusion of depth. Essentially all you need to do to create this illusion is to move the background graphic at a slower speed than the foreground and your eyes do the rest.

So where do we start?

The first step is to create a nice and long vertical scrolling page. The page is broken with 2 large pictures of Sirbastian's face and an overlaid paragraph in white.

We use an aside as the container for these sections and add a class of parallaxbox to it. Obviously, you don't have to use the aside tag and a plain div would do just as nicely. Then we use an inline style to specify the relevant background image to use (again this could be done in a number of ways, but for the sake of clarity we chose to use an inline style), and finally we throw in a couple of headers for our overlaid content which could obviously be anything you like e.g. paragraphs, blockquotes, lists etc.

Now that we have this basic structure in place we us the stylesheet to lay out the image and overlaid content in a nice simple way with the text on the right and the focus of the image on the left.

This now represents the non-javascript version of the page. The image doesn't parallax, but everything looks sensible and nothing is broken for people or devices who don't enable scripting. Nice.

Enabling the parallax effect

We have developed a very simple Mootools Parallax Class that applies the parallax effect. The whole file is less than 100 lines, half of which are either comments or white space to make it easier to read and understand.

Simply dropping this script into a page with any block elements using a class of 'parallaxbox' will enable it to begin working its magic. The only corollary to this is that the background position of the element must be specified in x/y positions e.g. 100px 20px, 50% 20px, 10px 25% etc.

In essence the class begins by looking for any parallax enabled elements and then attaches itself to any page resize or scroll events. Any time the user moves or resizes the window then we look to see if any of the parallax boxes are visible to the user. If they are then we use our knowledge of the scroll position relative to the box to dynamically adjust the CSS Background Position property of the background image. Effectively we dampen any scrolling motion by sliding the background image up or down a little inside their container. By moving this at a different rate to the scroll the illusion of depth is achieved.

Using HTML5 style data attributes on the box we can choose the initial offset of the image to ensure that the movement never exceeds the edge of the image being used (which must always be oversized compared to the box to cater for movement in the relevant plane). We can also specify whether we move the image in the X or Y plane to allow for different types of effect. In our demo page we move the top image in the vertical plane and the bottom in the horizontal.

Final thoughts

The beauty of this technique is in its simplicity. Changing the background position of elements isn't too intensive for either older machines or older browsers. We have tested this script across Firefox (PC/Mac), Safari (Mac), Chrome (PC/Mac) and IE10/9/8/7 (PC) with no issues. By overlaying stencil PNGs with cut outs you can create even more variations on the effect.