jQuery Parallax is a script that simulates the parallax effect as seen on nikebetterworld.com.
Add script
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="javascripts/jquery-parallax.js"></script>Add class to the elements needed parallax effect (ex. parallax-bg)
<div id='parallax1' class='parallax-bg'></div>Make sure the elements got a background image, for best effect the images height should be 20% larger than container element height (if using default speedFactor). For example:
.parallax-bg {
margin: 0 auto;
padding: 0;
position: absolute;
z-index: 200;
width: 100%;
height: 500px;
}Here we have a element with 500px in height, so the background images should have more than 600px in height.
Initiate parallax:
$(window).load(function() {
$('.parallax-bg').parallax({offsetY:-200}); //in case of big image, you can offset a little bit to center it.
}Viola! You now have a simple parallax page!!
Basic usage
$(selector).parallax(options);###Options
####offsetX default: 50%
x-pos of background image.
####offsetY default: 0
y-pos offset of background image.
####speedFactor default: 0.12
Background image moving speed relative to scrolling speed. Where parallax magic happens.
####outerHeight default: true
If true use jQuery's .outerHeight(), else use jQuery's .height().