JSFiddle - React, Tailwind, and code Playground

by Gina Meyer

HTML

<body>

<ul class="parallax">
    <li>
        <div class="parallax-background flower"></div>
        <div class="subcontent">
            <h1>Some Flower</h1>
            <h2>some other text</h2>
        </div>
    </li>

    <li>
        <div class="parallax-background lens"></div>
        <div class="subcontent">
            <h1>Some Lens</h1>
            <h2>some other text</h2>
        </div>
    </li>

    <li>
        <div class="parallax-background beach"></div>
        <div class="subcontent">
            <h1>Some Beach</h1>
            <h2>some other text</h2>
        </div>
    </li>

    <li>
        <div class="parallax-background wolf"></div>
        <div class="subcontent">
            <h1>Some Wolf</h1>
            <h2>some other text</h2>
        </div>
    </li>
</ul>
</body>

CSS

body{
    margin: 0;
    padding: 0;
}

ul{
    margin: 0;
    padding: 0;
}

ul li{
    list-style: none;
    overflow: hidden;
    height: 600px;
    position:relative;
}

.parallax-background{
    height: 700px;
}

.flower{
    background-image: url('http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.jpg');
    background-position: 50% 70%;
    background-size: cover;
}

.lens{
    background-image: url('http://lh5.ggpht.com/-Lg0g3WfBvR0/TiblYuKu3II/AAAAAAAABAM/xIaE-os2xOI/s9000/Camera%2BLens%2BIn%2BThe%2BDark%2BRoom.jpg');
    background-position: 50% 100%;
    background-size: cover;
}

.beach{
    background-image: url('http://webneel.com/wallpaper/sites/default/files/images/04-2013/tropical-beach-wallpaper.jpg');
    background-position: 50% 70%;
    background-size: cover;
}

.wolf{
    background-image: url('http://jootix.com/upload/DesktopWallpapers/cache/grey-wolf-snow-grey-wolf-snow-1366x768.jpg');
    background-position: 50% 70%;
    background-size: cover;
}

ul li .subcontent{
    position: absolute;
    top:100px;
    left:100px;
    color: #ffffff;
    font-family: Helvetica;
}

h1{
    font-size:70px;
    margin-bottom: 0px;;
}

h2{
    font-size:50px;
    margin-bottom: 0px;;
}

JavaScript

(function($) {

    var $container = $(".parallax");
    var $divs = $container.find("div.parallax-background");
    var thingBeingScrolled = document.body;
    var liHeight = $divs.eq(0).closest("li").height();
    var diffHeight = $divs.eq(0).height() - liHeight;
    var len = $divs.length;

    var i, div, li, offset, scroll, top, transform;

    //cache initial offsets
    var offsets = [];


    offsets =$divs.get().map(function(div,d){
        return $(div).offset();
    });

    var render = function(){

        //thing were scrolling
        top = thingBeingScrolled.scrollTop;

        for(i = 0; i < len; i++){

            //get the DOM object div
            div = $divs[i];

            //calculate the offsetTop of div
            offset = offsets[i].top;
                                  
            //calculate the amount to scroll
            scroll = ~~(((top - offset) / liHeight) * diffHeight);
            
            // create transform string
            transform = 'translate3d(0px, ' + scroll + 'px,0px)';

            //apply the scroll amount
            div.style.webkitTransform = transform;
            div.style.mozTransform = transform;
            div.style.transform = transform;

        }

    };

    (function loop(){

        requestAnimationFrame(loop);
        render();

    })();

})(jQuery);