jQuery Plugin For Horizontal Parallax Scrolling - jInvertScroll

jInvertScroll is a lightweight and fast jQuery plugin for creating horizontal parallax scrolling effects on page scroll down.

How to use it:

1. Create the html elements you wan to scroll

<div class="horizon scroll"> <img src="images/horizon.png" alt="" /> </div>
<div class="middle scroll"> <img src="images/middle.png" alt="" /> </div>
<div class="front scroll"> <img src="images/front.png" alt="" /> </div>

2. Include jQuery javascript library and jQuery jInvertScroll plugin on the page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="../dist/js/jquery.jInvertScroll.js"></script> 

3. The sample CSS

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body {
overflow-x: hidden;
background: url('../images/bg.jpg') repeat top left;
}
h1 {
font-size: 20px;
font-weight: normal;
color: #2e6e80;
}
/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll {
position: fixed;
bottom: 0;
left: 0;
}
/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */
.horizon {
z-index: 1;
width: 3000px;
}
.middle {
z-index: 500;
width: 4000px;
}
.front {
z-index: 1000;
width: 6000px;
}

4. Call the plugin with options

<script type="text/javascript">
(function($) {
$.jInvertScroll(['.scroll'],// an array containing the selector(s) for the elements you want to animate
{
height: 6000,   // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
onScroll: function(percent) {   //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
console.log(percent);
}
});
}(jQuery));
</script>

Change log:

2014-06-03

• updated to support jQuery 1.11.1

---

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