A while ago I stumbled across a very interesting site. It uses a technique called the motion parallax effect. Though it might not have been the first instance of this technique on the web. I had never seen it before, and was excited to try my own implementations.

First go with a parallax

Example

Using Adobe Illustrator and Photoshop I quickly put together the necessary images that were needed to create the effect.

Back most image

This rain drops in this image are smaller, lighter, and somewhat blurry considering that they will be the farthest away from the eye.

Middle image

The middle image is the focal point of three images. This image should be the most detailed and clear to see.

Front image

This image must be fairly blurred, large, and less detailed than the others. This is because it is the closest to the persons eye.

The code

Now that we have our three images made, all there is left to do is add the simple code to finish the effect.

HTML

Two empty div elements are all that are needed.

< div id="wrapper" >
	< div id="sub_wrap" >

	< /div >
< /div >

CSS

Attach the back image to the body element and horizontally position the said image to 10%. Do the same thing with the wrapper div and sub_wrap div using the last two images. Play around with the horizontal positioning of each of the images until you’re comfortable with the way that they move indifferently to each other.

* {
	margin:0;
	padding:0;
}
body {
	background:#D9E0FF url(back.png) repeat-x 10% 0px;
}
#wrapper {
	width:100%;
	height:320px;
	background:url(middle.png) repeat-x 30% 0px;
}
#sub_wrap {
	width:100%;
	height:320px;
	background:url(front.png) repeat-x 80% 0px;
}

See? It’s not hard at all. I was amazed at how easy it was to make it work. Keep in mind that the images should be transparent PNG’s so that you can see through to the images underneath.
Next I will show you how to make a parallax effect on the bottom of the browser. This uses another technique called a sticky footer to work properly.

Here is a sneak peak:

Other Sites

Here are some other sites that use the motion parallax effect.

SilverBackApp

Rissington Podcast

Kremalicious

Inner Geek (vertical parallax)

Really Worried

Viemo

Although not quite as apparent as the others. There is still some parallax action going on there.

update (8/31/08): Thanks to Tyler Stalder

webdev.stephband.info

This is a parallax effect created with javascript using the popular javascript framework JQuery.

• Categorys:
• CSS

• Tags:
• CSS
• images
• parallax
• silverbackapp