JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<!-- Example space --><div style="height: 100px;"></div><!-- End space -->
<div data-parallax-wrap>
    <div class="example-content-class">
        <h1>Some content inside</h1>
        <p>Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Curabitur turpis. Fusce commodo aliquam arcu. Mauris sollicitudin fermentum libero.</p>
    </div>
    <div data-parallax-inner>
        <div class="example-parallax-class" style="background-image: url(http://lorempixel.com/1280/800/city);"></div>
    </div>
</div>
<!-- Example space --><div style="height: 500px;"></div><!-- End space -->

<div data-parallax-wrap>
    <div class="example-content-class">
        <h1>Some content inside</h1>
        <p>Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Curabitur turpis. Fusce commodo aliquam arcu. Mauris sollicitudin fermentum libero.</p>
    </div>
    <div data-parallax-inner>
        <div class="example-parallax-class" style="background-image: url(http://lorempixel.com/1280/800/nature);"></div>
    </div>
</div>
<!-- Example space --><div style="height: 500px;"></div><!-- End space -->

<div data-parallax-wrap>
    <div class="example-content-class">
        <h1>Some content inside</h1>
        <p>Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Curabitur turpis. Fusce commodo aliquam arcu. Mauris sollicitudin fermentum libero.</p>
    </div>
    <div data-parallax-inner>
        <div class="example-parallax-class" style="background-image: url(http://lorempixel.com/1280/800/abstract);"></div>
    </div>
</div>

CSS

html,
body{
    margin: 0;
    padding: 0;
    position: relative;
}

[data-parallax-wrap]{
    position: relative;
    overflow: hidden;
}
[data-parallax-inner]{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: -1;
}

.example-content-class{
    padding: 20px;
    box-sizing: border-box;
    font-family: sans-serif;
}

.example-parallax-class{
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JavaScript

var sParallax = {
    /**
     * Bind update events
     */
    init: function(){
        var _s = this;
        _s.updatePos();
        $(window).scroll(function(){
            _s.updatePos();
        });
        $(window).resize(function(){
            _s.updatePos();
        });
    },
    updatePos: function(){
        var _s = sParallax;
        var currentScroll = $(window).scrollTop();
        var currentY = $(window).height();
        $('[data-parallax-wrap]').each(function(){
            var scaleFactor = 1;
            var thisY = $(this).height();
            var fromTop = $(this).offset().top;
            var thisOffset = Math.min(Math.max(0,((currentScroll + currentY) - fromTop)), (currentY + thisY));
            var scaleOffset = (0 - (thisOffset / (thisY + currentY)) * 100) * scaleFactor;
            $('[data-parallax-inner]', this).css('top', scaleOffset + '%');
        });
    }
}

sParallax.init();