jQuery Plugin For Vertical and Horizontal Parallax Effects - Scroll Parallax

Scroll Parallax is a simple and easy to use jQuery plugin for creating Vertical and Horizontal Parallax Effects on scrolling. The parallax principle is to move different backgrounds when we scroll the page in order to create some nice perspective. 

Basic Usage:

1. Create the html elements which you want to apply the parallax effect to

<ul class="items">
<li class="item item1">
<div class="inner inner1"></div>
<div class="content">Content 1.</div>
</li>
<li class="item item2">
<div class="inner inner2"></div>
<div class="inner-lev1 inner2a"></div>
<div class="inner-lev2 inner2b"></div>
<div class="content">Content 2.</div>
</li>
<li class="item item3">
<div class="inner inner3"></div>
<div class="content">Content 3.</div>
</li>
<li class="item item4">
<div class="inner inner4"></div>
<div class="content">Content 4.</div>
</li>
<li class="item item5">
<div class="inner inner5"></div>
<div class="content">Content 5.</div>
</li>
</ul>

2. The CSS

.items {
overflow: hidden;
}
.item {
width: 100%;
overflow: hidden;
position: relative;
height: 768px;
}
.inner, .inner-lev1, .inner-lev2 {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.content {
background: rgba(255,255,255,0.9);
background: white;
padding: 20px;
width: 300px;
margin: 30px;
position: relative;
z-index: 2;
}
/* parallax images */
.item1 {
background: white url(http://lorempixum.com/1024/768/city/1) 0px 0px fixed no-repeat;
}
.inner1 {
background: url(http://lorempixum.com/200/200/people/1) 400px 200px fixed no-repeat;
}
.item2 {
background: white url(http://lorempixum.com/1024/768/city/2) 0px 0px fixed no-repeat;
}
.inner2 {
background: url(http://lorempixum.com/200/200/people/2) 400px 200px fixed no-repeat;
}
.inner2a {
background: url(http://lorempixum.com/200/200/sports/1) 500px 250px fixed no-repeat;
}
.inner2b {
background: url(http://lorempixum.com/200/200/sports/2) 600px 300px fixed no-repeat;
}
.item3 {
background: white url(http://lorempixum.com/1024/768/city/3) 0px 0px fixed no-repeat;
}
.inner3 {
background: url(http://lorempixum.com/200/200/people/3) 400px 200px fixed no-repeat;
}
.item4 {
background: white url(http://lorempixum.com/1024/768/city/4) 0px 0px fixed no-repeat;
}
.inner4 {
background: url(http://lorempixum.com/200/200/people/4) 400px 200px fixed no-repeat;
}
.item5 {
background: white url(http://lorempixum.com/1024/768/city/5) 0px 0px fixed no-repeat;
}
.inner5 {
background: url(http://lorempixum.com/200/200/people/5) 400px 200px fixed no-repeat;
}

3. Include necessary javascript files on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://github.com/protonet/jquery.inview/raw/master/jquery.inview.min.js"></script> 
<script src="jquery.scrollParallax.min.js"></script> 

4. Initialize the plugin

$(function(){
/* main background image. moves against the direction of scroll*/
$('.item').scrollParallax({
'speed': -0.2
});

/* inner items, moves slightly faster than the background */
$('.item .inner').scrollParallax({
'speed': -0.5
});

/* two additional samples inside item2, both moving with direction of scroll*/
$('.item .inner-lev1').scrollParallax({
'speed': 0.2
});
$('.item .inner-lev2').scrollParallax({
'speed': 0.5
});
});

---

This awesome jQuery plugin is developed by davecranwell. For more Advanced Usages, please check the demo page or visit the official website.