JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="container_row">
    <div class="whatiflogo">
        <div>What if?</div>
    </div>
    <div class="layer1">
        <div>A service to <span>challenge</span> everyday <span>thinking</span> and identify approaches never previously considered.</div>
    </div>
    <div class="layer2-text">
        <div>Using research and insights from yours and many other sectors, our 'What if?' consulting service reveals new routes to market, ways of increasing the results of a particular channel and new audiences your product or services could reach.</div>
    </div>
    <div class="layer2">
        <div class="content-50"></div>
    </div>
    <div class="layer3-text">
        <div>You wanted to engage consumers more in-store</div>
    </div>
    <div class="layer3">
        <div class="content-50"></div>
    </div>
    <div class="layer4-text">
        <div>2You wanted to engage consumers more in-store2</div>
    </div>
    <div class="layer4">
        <div class="content-50"></div>
    </div>
</div>
<div class="bgimage1"></div>
<div class="bgimage2"></div>
<div class="bgimage3"></div>

CSS

.container_row {
    position: fixed;
}
.whatiflogo {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    opacity:0;
}
.whatiflogo div {
    position:absolute;
    bottom:0;
    text-indent:-9999px;
    background:url('http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/whatif-logo-white.png') bottom no-repeat;
    background-size:100% auto;
    width:35%;
    height:221px;
    margin: 0 50px;
}
.layer1 {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}
.layer1 div {
    text-align:center;
    font-size:50px;
}
.layer2 {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    opacity:0;
}
.layer2 .content-50 {
    background: rgba(31, 202, 212, 0.8);
}
.layer2-text {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    opacity:0;
}
.layer2-text div {
    margin: 0 50px;
    position:absolute;
    bottom:0;
    width:35%;
    color:#fff;
}
.layer3 {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    opacity:0;
}
.layer3 .content-50 {
    background: rgba(255, 198, 0, 0.8);
}
.layer3-text {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    opacity:0;
}
.layer3-text div {
    margin: 0 50px;
    position:absolute;
    bottom:0;
    width:35%;
    color:#fff;
}
.layer4 {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    opacity:0;
}
.layer4 .content-50 {
    background: rgba(253, 130, 0, 0.8);
}
.layer4-text {
    position: absolute;
    z-index: 6;
    left: 0;
    top: 0;
    opacity:0;
}
.layer4-text div {
    margin: 0 50px;
    position:absolute;
    bottom:0;
    width:35%;
    color:#fff;
}
.bgimage1 {
    width:100%;
    height:350vh;
    background-image: url('https://static.pexels.com/photos/7257/water-rocks-river-large.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
    background-size:cover;
}
.bgimage2 {
    width:100%;
    height:150vh;
    background-image:...

JavaScript

$(document).ready(function () {

    w = $(window).width();
    h = $(window).height();

    $('.layer1, .layer2, .layer2-text, .layer3, .layer3-text, .layer4, .layer4-text, .whatiflogo').css({
        height: h + "px",
        width: w + "px"
    });

    $('.layer1 .content-50, .layer2 .content-50, .layer3 .content-50, .layer4 .content-50').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();

        /* 
        Change to layer2 
        0.75 < blue < 1.75
        */
        if ((offsetScroll / window_height) >= 0.75) {
            var opac = (offsetScroll / window_height) - 0.75;
            opac *= 1;

            var off = ((offsetScroll / window_height) - 0.75);
            var bot = (h / 2) * off;

            if (opac < 1) {
                $('.layer1').css("opacity", 1 - opac);
                $('.layer2').css("opacity", opac);
                $('.layer2-text').css("opacity", opac);
                $('.layer2-text div').css("bottom", (bot - 120) + "px");
                $('.whatiflogo').css("opacity", opac);
                $('.whatiflogo div').css("bottom", bot + "px");
            } else {
                $('.layer1').css("opacity", "0");
                $('.layer2').css("opacity", "1");
                $('.layer2-text').css("opacity", "1");
                $('.whatiflogo').css("opacity", "1");
            }
        }

        /* 
        Change to layer3 
        2.5 < yellow < 3.5
        */
        
        if ((offsetScroll / window_height) >= 2.4) {
            var opac = (offsetScroll / window_height) - 2.4;
            opac *= 1;
                               
            var off = ((offsetScroll / window_height) - 2.4);
            var bot = ((h / 2) * off)-60;
            
            if (opac < 1) {
             ...