Paralla-wha?

Not to be confused with high-school geometry, parallax is a visual concept oft’ used in old-timey video games. Picture a mustachioed plumber defeating strange shell creatures. As the stumpy plumber scrolls jollily right, the floor scrolls at the same speed as him. However, the happy clouds in the background scroll slower than our hero. This creates the amazing appearance that the clouds (or sun or stars or evil castle walls) are further away than the hero. This effect can be modified by altering the speed of the numerous elements.

A slower background seems further away.

Prepping the Images

Taking a step away from our plumber friend, our header will scroll up (or down if you like thinking backwards). The first step in creating the header is preparing the artwork. We’ll make a three layer scroller and add a fourth layer for the character.

When designing your layers, it is important to consider both their layering and transparency. Where do you want parts to shine through? Where are things obscured. I’ll leave this part up to you. Here’s a quick-and-dirty sample I’ve prepared earlier

Layers are numbered from top to bottom. Transparency is not visible, but you get the idea.

A Note on Image Size

Images should be in PNG-24 format to accommodate varying opacities (sorry IE). Also important are the heights of the images. Static elements (like the title) can be whatever hight they need to be. Everything else has a hight relative to how fast you want it to move. The faster it moves, the taller it should be.

Putting it Together – the HTML

The structure of the page is quite simple. We need four elements to enclose our four images. These four will be wrapped in each other.

<div id="header">
     <h1  class="snazzyheader">Falling Man Productions</h1>
</div>

Easy huh? That’s because we’re gonna be doing most of the heavy lifting with jQuery. How’s about them apples? Let’s look at the CSS before we get to the lifting.

Putting it Together – the CSS

#header {
	width: 610px;
	height: 200px;
	position: relative;
}
h1.snazzyheader {
	width: 610px;
	height: 200px;
	background: transparent url("layer-2.png") no-repeat 0 0;
	text-indent: -9999em;
	z-index: 3;
	position: relative;
}
#header .layer-4, #header .layer-3, #header .layer-1 {
	display: block;
	width: 610px;
	height: 200px;
	position: absolute;
	top: 0;
}
#header .layer-4 {
	z-index: 1;
	background: transparent url("layer-4.png") repeat-y 0 0;
}
#header .layer-3 {
	z-index: 2;
	background: transparent url("layer-3.png") repeat-y 0 0;
}
#header .layer-1 {
	z-index: 4;
	background: transparent url("layer-1.png") repeat-y 0 0;
}

Ok, some explaining. First #header houses all our elements so it needs some basic styling. Width, height, and relative positioning all help us later on.

The h1 element gets the same width and height as the finished header. A super high, super negative text-indent keeps the header text invisible to the end user while still letting google-bot and it’s ilk find the site. Most important are the z-index and relative positioning. The z-index puts the layer in the stack (higher numbers are “closer” to you) and the positioning lets the layer play in the same world as absolutely positioned elements.

Then a catch-all declaration for our other three layers. Again, the same width and height. These layers, however, have absolute positioning to keep them over each other. Because they are contained in the relatively positioned #header, they cannot escape. top: 0 makes sure these elements stay glued to the top of the #header element.

Lastly, the three layer elements get their individual z-indexes and background images.

Phew!

Putting it Together – the jQuery

Now for the fun part! The jQuery! You’ll need the latest jQuery build and the wonderful Background Position Animation Plugin. Got ‘em? Good. Now first we have to get these layers into our document. We do this with jQuery’s append function.

$("#header").append('<span class="layer-1"></span><span class="layer-3"></span><span class="layer-4"></span>')
	.children("span")
	.hide().animate({opacity: "1"}, 2000).fadeIn(500);

After appending the three spans we immediately hide them and use a makeshift timer (animate({opacity: "1"}, 2000)) to give time for the background images to load. After this time has past, we fadeIn the images. Now it’s time to start the scrolling. Because we want the scrolling to be continuous, we’ll build the functions as loops outside of the $(document).ready function and include them later. The basic function looks like this:

function layer1() {
	$('.layer-1').animate({backgroundPosition:"(0 -482px)"}, 12000, "linear")
		     .animate({backgroundPosition:"(0 0)"}, 0, "linear");
	setTimeout("layer1()",12000);
}

We animate the backgroundPosition to a negative value equal to the height of the image. Then, we animate it back to “0 0″ in no time at all (to seamlessly reset the animation). The setTimeout function gets the same timing as the original animation and fires this same function again creating a loop. Three of these functions are made, one for each of the animating layers. The final javascript looks like this:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.backgroundPosition.js"></script>
<script type="text/javascript">
function layer1() {
	$('.layer-1').animate({backgroundPosition:"(0 -482px)"}, 12000, "linear")
		     .animate({backgroundPosition:"(0 0)"}, 0, "linear");
	setTimeout("layer1()",12000);
}
 
function layer3() {
	$('.layer-3').animate({backgroundPosition:"(0 -780px)"}, 12000, "linear")
		     .animate({backgroundPosition:"(0 0)"}, 0, "linear");
	setTimeout("layer3()",12000);
}
 
function layer4() {
	$('.layer-4').animate({backgroundPosition:"(0 -1000px)"}, 12000, "linear")
		     .animate({backgroundPosition:"(0 0)"}, 0, "linear");
	setTimeout("layer4()",12000);
}
 
 $(document).ready(function() {
 	$("#header").append('<span class="layer-1"></span><span class="layer-3"></span><span class="layer-4"></span>')
		     .children("span")
		     .hide().animate({opacity: "1"}, 2000).fadeIn(500);
 
	//Firefox Needs us to set the backgroundPosition manually for the animation to work
	$('.layer-1').css("backgroundPosition","0 0");
 	$('.layer-3').css("backgroundPosition","0 0");
 	$('.layer-4').css("backgroundPosition","0 0");	
 
	layer1();
	layer3();
	layer4();
 
 });
</script>

Note that we have to set the backgroundPosition to “0 0″ manually for Firefox to play nice.

Falling is Easy

And that’s all she wrote! Check out the demo to see the effect in action. And be sure to stay tuned for more exciting tutorials.