This morning I was asked by Tyrun on Twitter (sorry, I couldn’t find your actual name, sir) about something that I’ve been asked a few times: I LOVE your header background, how on earth did you do that?

The very short answer is: with JavaScript and CSS.

Of course, that’s not a very satisfying response, so I’ll go ahead and expound a bit more. I did it in three steps. First, creating the right group of images. Secondly, with some simple CSS and HTML. Lastly, with a surprisingly short JS script.

Step 1: The Images

The first step for parallax scrolling, in any application, is having multiple layers of images to scroll at different speeds, with each layer representing another part of the passing landscape. In the case of this site, I’ve got four: clouds, mountains, hills, and forest. By themselves, neither layer looks terribly interesting.

Layer 1: Clouds

Layer 2: Mountains

Layer 3: Hills

Layer 4: Forest

They’ll have to be stacked over each other, so in order to be seen through one another they need to have transparency. This is why I used PNGs (although depending on the type of art you use, GIFs are fine).

Step 2: The CSS and HTML

Next, the images will have to be stacked over each other. I made four empty divs which I put in the header/branding div as follows:

<div id="cloudLayer" > </div>
<div id="mountainLayer" > </div>
<div id="hillLayer" > </div>
<div id="forestLayer"> </div>

Although I’m not normally a fan of non-semantic divs, for this special effect I need something to hang the imagery upon. These four divs will be what we need for the CSS:

div#cloudLayer, div#mountainLayer, div#hillLayer, div#forestLayer {
 height:200px;
 position:absolute;
 text-indent:-9999em;
 width:100%;
}

div#cloudLayer {
background:transparent url(images/clouds.png) repeat-x scroll left top;
opacity:0.6;
}

div#mountainLayer {
background:transparent url(images/mountains.png) repeat-x scroll left top;
}

div#hillLayer {
background:transparent url(images/hills.png) repeat-x scroll left top;
}

div#forestLayer {
background:transparent url(images/forest.png) repeat-x scroll left top;
}

So each div is set at the same height, as wide as the parent element (the header), and absolutely positioned so they all overlap. Each background image is set appropriately to repeat horizontally along the layer it is within. If nothing further was done, this would be a complicated way to create a repeating landscape background. Only one small bit is left to make it scroll.

Step 3: The JavaScript (with jQuery!)

I love jQuery. It’s a convenient, compact JS library that makes cross-browser coding easy and compact. You could probably do this script without it, but by necessity it’d be a lot larger. Here’s the part of my script that controls the scrolling:

$('#branding').mousemove(function(e) {
mouseX = e.clientX;
$('#cloudLayer').css('background-position', Math.floor(mouseX / 4) + 'px 0');
$('#mountainLayer').css('background-position', Math.floor(mouseX / 3) + 'px 0');
$('#hillLayer').css('background-position', Math.floor(mouseX / 2) + 'px 0');
$('#forestLayer').css('background-position', mouseX + 'px 0');
});

I want the scrolling to only occur when the mouse is over the header, which is a div I call branding. So I’ve bound the .mousemove() event handling function to that div. I get the x-coordinate of the mouse when that even fires (anytime the mouse moves) and then adjust the background image positioning on the layer divs accordingly.

If I moved each layer’s background image by the same amount, the image would scroll all at once, and there’d be no parallax effect. Therefore, I instead divide the x-coordinate by a different amount for three of the four layers, moving each background image an increasingly smaller amount for the “far” layers.

The finished result is visible in the header above!

As always, if you have any comments or questions, feel free to share.