Horizontal Parallax on Scroll - jQuery

3 layers, different background position and speed as you scroll the window. It also switches the image depending if you scroll up or down.

HTML

<div class="c">        
    <div id="fishyContainer">
        <div class="fishy nflip fishya"></div>
        <div class="fishy nflip fishyb"></div>
        <div class="fishy fishyc"></div>
        <div class="fishy flip fishyaFlip"></div>
        <div class="fishy flip fishybFlip"></div>
    </div>
</div>​

CSS

.c {
    height: 1000px;
    overflow-x: hidden;
    width: 700px;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
    background: #000a22;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.4);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}
.flip { 
    display: none; 
}
#fishyContainer { 
    top: 230px; position: absolute; 
}
.fishy {
    position: absolute;
    background-repeat: repeat-x;
    background-position: left top;
    width: 5000px; height: 370px;
}
.fishy.fishya { 
    background: url('fisha.png'); 
}
.fishy.fishyb { 
    background: url('fishb.png'); opacity: .4; 
}
.fishy.fishyc { 
    background: url('fish2c.png'); 
}
/* flipped fishy */
.fishy.fishyaFlip { 
    background: url('fishaflip.png'); 
}
.fishy.fishybFlip { 
    background: url('fish2bFlip.png'); opacity: .4; 
}

​jQuery

$(document).ready(function() {
    var speed = 40;
    var lastScrollTop = 0;
    // higher variation = faster acceleration
    function positon(variation) {
        newPosition = (scrollPercent * (speed * variation)) - (speed * variation);
        return newPosition + "%";
    }
    $(window).scroll(function(e) {
        var scrollNum = $(window).scrollTop();
        scrollPercent = $(window).scrollTop() / ($(document).height() - $(window).height());

        if (scrollNum > lastScrollTop) {
            // downscroll
            $(".nflip").show(); $(".flip").hide();
            $(".fishya").css("backgroundPosition", positon(-1.6) + ' 0');
            $(".fishyb").css("backgroundPosition", positon(-0.8) + ' 10px');
            $(".fishyc").css("backgroundPosition", positon(-0.3) + ' 500px');
        } else {
            //upscroll
            $(".nflip").hide(); $(".flip").show();
            $(".fishyaFlip").css("backgroundPosition", positon(-1.6) + ' 0');
            $(".fishybFlip").css("backgroundPosition", positon(-0.8) + ' 10px');
            $(".fishyc").css("backgroundPosition", positon(-0.3) + ' 500px');
        }
        lastScrollTop = scrollNum;
    });
});​

DEMO
http://jsfiddle.net/leethelobster/N7SS3/embedded/result/