Horizontal Parallax on Scroll - jQuery

by jashet villegas

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;
}
/* fishies animation */
#fishyContainer {
    top: 230px;
    position: absolute;
}
.fishy {
    position: absolute;
    background-repeat: repeat-x;
    background-position: left top;
    width: 5000px;
    height: 370px;
}
.fishy.fishya { 
    background: url('https://preview.ibb.co/duHgoe/background.jpg" '); 
}
.fishy.fishyb { 
    background: url('https://preview.ibb.co/duHgoe/background.jpg" '); 
    opacity: .4; 
}
.fishy.fishyc { 
    background: url('https://preview.ibb.co/duHgoe/background.jpg" '); 
}
/* flipped fishy */
.fishy.fishyaFlip { 
    background: url('https://preview.ibb.co/duHgoe/background.jpg" '); 
}
.fishy.fishybFlip { 
    background: url('https://preview.ibb.co/duHgoe/background.jpg" '); 
    opacity: .4;
}

JavaScript

$(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;
    });
});