JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="container_row">
    
    
    <div class="layer1">
        <div class="content-50">
            First Frame
        </div>
    </div>
    
    <div class="layer2">
        <div class="content-50">
            Second Frame
        </div>
    </div>
    
    <div class="layer3">Third Frame</div>
    
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS

.container_row {
    position: fixed;
}

.layer1 {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    background: url('https://static.pexels.com/photos/6660/typography-poster-posters-quote-large.jpg') center center no-repeat fixed;
    background-size:100% 100%;
}

.layer1 .content-50 {
    background: rgba(195,214,0,0.8);
}

.layer2 {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    opacity:0;
    background: url('https://static.pexels.com/photos/5969/wood-nature-forest-bridge-large.jpg') center center no-repeat fixed;
    background-size:100% 100%;
}

.layer2 .content-50 {
    background: rgba(31,202,212,0.8);


.layer3 {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height:100px;
    width:200px;
    background: #1fcad4;
    opacity:0;
}

JavaScript

$(document).ready(function () {
    
    w = $(window).width();
    h = $(window).height();
    
    $('.layer1, .layer2, .layer3').css({
        height: h+"px",
        width: w+"px"
    });
    
    $('.layer1 .content-50, .layer2 .content-50, .layer3').css({
        height: h+"px",
        width: w/2+"px"
    });

    $(document).scroll(function (e) {
        /*How far from the top you are */
        offsetScroll = jQuery(document).scrollTop();

        /*Height of the window*/
        window_height = jQuery(window).height();

        console.log("offsetScroll: " + offsetScroll);

        var opac = (offsetScroll / window_height) - 0.5;

        /* Change to second section */
        if ((offsetScroll / window_height) >= 0.5) {
            console.log("opac = " + opac);
            $('.layer1 .content-50').css({
                opacity: 1 - (opac * 2)
            });
            $('.layer2').css({
                opacity: opac*2
            });
        } else if ((offsetScroll / window_height) < 0.5) {
            $('.layer2').css({
                opacity: 0
            });
            $('.layer1 .content-50').css({
                opacity: 1
            });
        } else {
            $('.layer1 .content-50').css({
                opacity: 1
            });
        }

    });

});