How to do header responses to mouse movements with jParallax
Posted: Tue Feb 09, 2010 1:55 am
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
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.
CSS
Basic JavaScripts
Use Layers option
jQuery(‘element’).jparallax(options, layer_0_options, layer_1_options, etc.);
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>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> Code: Select all
#parallax
{position:relative; overflow:hidden; width:800px; height:450px;border:none;
margin:0 auto 20px auto;}Code: Select all
jQuery(document).ready(function(){
jQuery('#parallax').();
}); 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'});
});