jInvertScroll Example

jInvertScroll - A lightweight jQuery horizontal Parallax Plugin Example

by San-Kai Liao

HTML

<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>
<div class="scroll">
    <div class="page page-1">PAGE-1</div>
    <div class="page page-2">PAGE-2</div>
    <div class="page page-3">PAGE-3</div>
</div>

CSS

html, body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}
.scroll {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
}
/* basic page */
 .page {
    height: 100%;
}
/* width for per page */
 .page.page-1 {
    width: 500px;
    background: red;
}
.page.page-2 {
    width: 800px;
    background: green;
}
.page.page-3 {
    width: 1200px;
    background: blue;
}

JavaScript

$(document).ready(function () {
    //position page
    var stageWidth = 0;
    $('.scroll > .page').each(function (i, page) {
        if (i > 0) {
            $(page).css('left', stageWidth);
        }
        $(page).css('position', 'absolute');
        stageWidth += $(page).width();
    });
    $('.scroll').width(stageWidth);
    //invert scroll
    $.jInvertScroll(['.scroll'], {
        onScroll: function (percent) {
            console.log(percent);
        }
    });
});