How to do header responses to mouse movements with jParallax

[Neo]

jParallax is no news to jQuery lovers. For those who still don't 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.

Linking javascripts

Code: Select all

<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.

Code: Select all

<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

Code: Select all

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

Basic JavaScripts

Code: Select all

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

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

Code: Select all

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