Creating a simple parallax effect

One of the latest crazes in web design is the parallax effect, or a 3D effect created by layering. You can find a really amazing, complicated design at NikeBetterWorld. Recently I created the effect on a much simpler scale for a small wakeboarder's website. I used jQuery to get the job done. The function works as follows:

//spd tells the object how quickly to move with the window scroll. 1 is normal speed.
opts.spd = opts.spd || 1;

This is the function to calculate the new position for the object based on the position of the window scroll.

function calcMove() {
//get the scroll position from top, document height, window height, and object height
	var offset =  $(document).scrollTop();
	var docSize = $(document).height();
	var windowSize = $(window).height();
	var boxSize = $(obj).height();
//calculate the percent down the document
	var room = offset/(windowSize - docSize);
//calculate the how fast the object should move and where it should be in relation to actual position
	var move = ((docSize * room) * opts.spd) + opts.startPos;
	return move;
}

Then you need a bit of javascript to place the objects and give them speed.

//this sets the height of the document (how far the entire scroll will go)
$('div#node-1').parents('#content').height(16200);
//the top setting is where the object starts and the spd is how fast it moves
$('div#node-1, div#node-1-title').css('top',65).parallax({spd:.15});

The best bet to get this working the way you want is to start from the top and move down. Testing objects as you move down the page to get them just where you want. Attached is the html file with the javascript you need to use this simple parallax function. Parallax doc

Category: 
Design
Programming
Tags: 
CSS
HTML
jQuery