Download
User Rating: 3.1/5 ( 4 votes)
jInvertScroll is a lightweight jQuery horizontal Parallax Plugin that allows you to move in horizontal with a parallax effect while scrolling down.
What is it?
It's a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down.
It's extremely easy to setup and requires nearly no configuration.
Note:
By using this plugin, we expect that you know the limitations of horizontal parallax scrolling, for instance if the screen height is smaller than the content, the content will be clipped, but this plugin is intended anyway for webdesigners and -developers, so we think that you know what you're doing.
Source: pixxelfactory.net
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/jInvertScroll.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jInvertScroll.js"></script>
2. HTML
<div class="scroll">
<img src="images/horizon.png" alt="" />
</div>
<div class="scroll">
<img src="images/middle.png" alt="" />
</div>
<div class="scroll">
...
</div>
3. JAVASCRIPT
(function($) {
$.jInvertScroll(['.scroll']);
}(jQuery));
4. OPTIONS
$.jInvertScroll(['.myScrollableElements'], {
width: 'auto', // Page width (auto or int value)
height: 'auto', // Page height (the shorter, the faster the scroll)
onScroll: function(percent) {
// Callback function that will be called each time the user
// scrolls up or down, useful for animating other parts
// on the page depending on how far the user has scrolled down
// values go from 0.0 to 1.0 (with 4 decimals precision)
}
});