To die for image rollovers with jQuery Parallax

The visual technique of parallax has been around computer graphics for some time.  The basic principal of parallax is the creation of an artificial 3D space through subtle movements on varying 2D planes.  Basically we can create a faux 3D environment with 2D elements.

Enough with the chit-chat.  Parallax can best be described by seeing it in action:

View the Parallax Demo

Parallax is typically used for creating captivating 3d scenes and landscapes, but here we’ll use it just to create some really nice image rollovers.

On with the tutorial

Requirements

• Basic understanding of HTML/CSS
• Basic understanding of creating PNG transparency
• jQuery
• jQuery – Parallax Plugin by Stephen Band

Feel free to download the entire project here.

Step 1. Design your image

Using Photoshop, or your image editor of choice so long as it supports .PNG alpha transparency, create an interesting design including several elements. You can create a scene like Stephen did or something simple like my demo.

Be sure to keep your design larger than you plan on using it in the final product.

Image Rollovers with jQuery Parallax - Step 1

Step 2. Set up your layers

Now pull apart your document, creating a 24-bit PNG for each layer. In my example I made three layers:
Layer 0 – The background: bg.png
Layer 1 – The guides: guides.png
Layer 2 – Text: name.png

Step 3. HTML

Now, with a separate PNG for each layer in our parallax, we can create a new HTML document with the following code in the body.

<div id="parallax">
        <!-- Layer 0 // Background -->
  	<div style="width:500px; height:500px;">
  		<img src="bg.png" alt="" />
  	</div>
 
        <!-- Layer 1 // Guides -->
  	<div style="width:500px; height:500px;">
  		<img src="guides.png" alt="" />
  	</div>
 
        <!-- Layer 2 // Text -->
  	<div style="width:500px; height:500px;">
  		<img src="name.png" alt=""/>
  	</div>
 </div>

Set the size of each DIV equal to the size of the image it is holding.

Step 4. CSS

We use CSS to define the window in which our parallax will render. Place the following rule in your stylesheet.

#parallax { 
  position:relative;
  overflow:hidden;
  width:400px;
  height:100px;
  margin:auto;
}

Step 4. Make it come alive with jQuery

In the head of your document, be sure to include the jQuery and jQuery.paralax libraries:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>

Now we can add our jQuery:

$(document).ready(function(){	
	$('#parallax').jparallax({
		// Options
	},
	{xtravel: '30px', ytravel: '30px'}, // Layer 0 : bg.png
	{xtravel: '50px', ytravel: '60px'}, // Layer 1 : guides.png
	{xtravel: '200px', ytravel: '80px'} // Layer 2 : name.png
	);	
});

Each line of {options} creates a unique set of rules for that layer. Reduce the xtravel/ytravel values in order to lessen the parallax effect. Background layers move less than foreground layers so make sure their xtravel/ytravel values are smaller than foreground layers. Feel free to tweak these numbers as you see fit. jQuery Parallax supports a multitude of options, consult the plug-in page for more information.

And that’s it! You should have something very similar to my completed demo. If not, please post a comment or drop me an email and I can help you out. Enjoy.