JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="container">
    <div class="content">
        <h1>Because for some reason people love Parallax.</h1>
        <p>Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
    <div class="image">
        <img class="image-inner" src="http://24.media.tumblr.com/af8ef1981adc2d3da65faf4e4c4b634e/tumblr_mq7ensU4u81st5lhmo1_1280.jpg">
    </div>
    <div class="content">
        <h1>This is a section.</h1>
        <p>Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
    <div class="image">
        <img class="image-inner" src="http://24.media.tumblr.com/f2ecb495fad3356ed139e594c72065a9/tumblr_mq7anbQsfQ1st5lhmo1_1280.jpg">
    </div>
    <div class="content">
        <h1>This is a section.</h1>
        <p>Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
    <div class="image">
        <img class="image-inner" src="http://25.media.tumblr.com/211b5f4f19038a3940a16c7bcd7c84de/tumblr_mq7at6uz641st5lhmo1_1280.jpg">
    </div>
</div>

CSS

body {
    background-color: gainsboro;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Sans-Serif;
    font-weight: 300;
}

.container {
    background-color: white;
    max-width: 900px;
    margin: 0 auto;
}

h1 {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1.2em;
    letter-spacing: 0.3em;
}

p {
  letter-spacing: 0.1em;
}

.container > div {
    width: 100%;
}

.content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2.0em;
}

.image {
    height: 700px;
    overflow: hidden;
    position: relative;
}

.image img {
    height: 150%;
    transform: translatez(0);
    position: absolute;
    bottom: 0;
    left: 0;
}

JavaScript

// requestAnimationFrame Polyfill
(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        },
        timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
    };
}());

// The Parallax Script.
function parralaxWrapper() {
    var bodyHeight = document.body.clientHeight,
        imgHeight = bodyHeight / 6,
        images = document.getElementsByClassName('image'),
        imagesInner = document.querySelectorAll('.image > .image-inner'),
        imagesOffset = [],
        imageLength = images.length,
        scrollTop = 0;

    for (var y = 0; y < imageLength; y++) {
        imagesOffset.push(images[y].offsetTop);
    }

    for (var i = 0; i < imageLength; i++) {
        images[i].style.height = imgHeight + 'px';
    }

    window.onscroll = function () {
        scrollTop = window.scrollY;
    };

    function parallax() {
        for (var x = 0; x < imageLength; x++) {
            if (scrollTop > imagesOffset[x] - bodyHeight) {
                imagesInner[x].style.webkitTransform = 'translate3d(0,' + (scrollTop) / 5 + 'px,0)';
                imagesInner[x].style.transform = 'translate3d(0,' + (scrollTop) / 5 + 'px,0)';
            }
        }
        requestAnimationFrame(parallax);
   ...