Paralax Scrolling Effect

This is so yesterday

by ben74

HTML

<script src="https://raw.github.com/IanLunn/jQuery-Parallax/master/scripts/jquery.localscroll-1.2.7-min.js"></script>
<script src="https://raw.github.com/IanLunn/jQuery-Parallax/master/scripts/jquery.parallax-1.1.js"></script>
<script src="https://raw.github.com/IanLunn/jQuery-Parallax/master/scripts/jquery.scrollTo-1.4.2-min.js"></script>
<ul id="nav">
    <li><a href="#first" title="Next Section">1</a></li>
    <li><a href="#second" title="Next Section">2</a></li>
    <li><a href="#third" title="Next Section">3</a></li>
</ul>

<div id="first">
    <div class="inner"><div class="bg"></div>

    </div> <!--.inner-->
</div> <!--#first-->

<div id="second">
    <div class="inner"><div class="bg"></div><div class="bg2"></div>
        <div class="content">
            <span id="pixels">0</span>
        </div>
    </div> <!--.inner-->
</div> <!--#second-->

<div id="third">
    <div class="inner">
        <div class="content">
        </div>
    </div> <!--.inner-->
</div> <!--#third-->

CSS

body{
    margin: 0;
    min-width: 980px;
    padding: 0;
}

#nav{
    list-style: none;
    position: fixed;
    right: 20px;
}

#nav li a {
    background: black;
    border-radius: 15px;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

#nav li a:hover {
    background: hotpink;
}

.inner{
    margin: 0 auto;
    min-width: 980px;
    width: 980px;
}

#first{
    background:url(http://placekitten.com/1300/1203) 50% 0px no-repeat fixed;
    color: white;
    height: 1200px;
    margin: 0 auto;
    padding: 0;
}


#second{
    background: url(http://placekitten.com/1300/1200) 50% 0 no-repeat fixed;
    color: white;
    height: 1200px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
}

#second .inner .content {
    padding-top: 200px;
    float: right;
}
    

#second .bg{
    background: url(http://placekitten.com/300/300) 50% 0 no-repeat fixed;
    height: 1200px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width: 980px;
    z-index: 200;
}

#pixels {
    font-size: 90px;
    text-decoration: underline;
    font-style: italic;
}

#second .bg2{
    background: url(http://placekitten.com/300/300) 30% 0 no-repeat fixed;
    height: 1200px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width: 980px;
    z-index: 200;
}

#third{
    background: url(http://placekitten.com/1300/1600) 50% 0 no-repeat fixed;
    height: 1600px;    
}

JavaScript

$(document).ready(function(){
    $('#nav').localScroll(800);
    
    RepositionNav();
    
    $(window).resize(function(){
        RepositionNav();
    });    
    
    //.parallax(xPosition, adjuster, inertia, outerHeight) options:
    //xPosition - Horizontal position of the element
    //adjuster - y position to start from
    //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
    //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
    $('#first').parallax("50%", 1200, 0.1, true);
    $('#second').parallax("50%", 1200, 0.1, true);
        $('#second .bg').parallax("50%", 3500, 0.3, true);
        $('#second .bg2').parallax("30%", 3500, 0.6, true);
   $('#third').parallax("50%", 1200, 0.1, true);

})