jParallax is no news to jQuery lovers. For those who still dont know anything about it. Here is a little introduction.

jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

Next, I will show you how to make a beautiful header that response to mouse movements. My portfolio site uses this trick, so you can see the result first.

Linking javascripts

<script src="js/jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"><!--mce:1--></script>
<script src="js/jquery.jparallax.js" type="text/javascript"><!--mce:2--></script>

HTML and CSS code.

Setup the window, give its id name parallax and width, so only this area responses to mouse movements. As the diagram shows above, the image you list first goes to the back.
Make sure the width is set properly to prevent collapsing view point. If any of the layer travels outside the parallax window, it will be hidden.

<div id="parallax"> <img style="width: 400px;" src="images/0.png" alt="" />
<img style="width: 500px;" src="images/1.png" alt="" />
<img style="width: 600px;" src="images/2.png" alt="" />
<img style="width: 550px;" src="images/3.png" alt="" /></div>

CSS

#parallax
    {position:relative; overflow:hidden; width:800px; height:450px;border:none;
	margin:0 auto 20px auto;}

My image 0

My image 1

My image 2

My image 3

Basic JavaScripts

jQuery(document).ready(function(){
	jQuery('#parallax').();
});

This is the result with default settings. As you can see, it is a bit weird.

Use Layers option

jQuery(‘element’).jparallax(options, layer_0_options, layer_1_options, etc.);

I disabled the Y axis movement and gave travel range to layer 0 (image 0) and layer 1(image 1). Now I have a nice ocean view header!!

jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({yparallax:false},{xtravel: '100px'},{xtravel: '300px'});
});

ADD TO

If this helps, why not tell your friends?

• 
• 
• 
• 
• 
• 
• 
• 
• 
•