JSFiddle - React, Tailwind, and code Playground

HTML

<div id="measure"></div>
<div class="layer" id="page1">
            <div class="background">&nbsp;</div>
            <div class="slide">
                <div class="content">
                    <h2>TEXT</h2>
                    
                </div>
            </div>
        </div>


<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

/*Reset*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

caption, article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    display: block;
}

html{
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-smooth: always;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
}

body {
    color: #000;
    font-size: 15px;
    line-height: 1;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
    background: #f7f6f4;
    position: relative;
}

.layer {
    min-width: 100%;
    height: 700px;
    white-space: nowrap;
}

.slide {
    width: 100%;
    min-width: 1000px;
    display: inline-block;
    position:relative;
    z-index: 100;
}

.content {
    width: 1000px;
    margin: 220px auto 0 auto;
    white-space: normal;
    text-shadow: #555 0 0 3px;
}

.content h2 {
    font-size: 50px;
    text-transform: uppercase;
    
}

.background {
    position:absolute;
    top:0;
    width: 100%;
    height:300px;
    background: red;
}

#measure {
    width: 1px;
    height: 0px;
    position: fixed;
}

JavaScript

var background = $('.background');

var docwindow = $(window);
var measure = $('#measure');

function newPos(pos, adjust, ratio){
    return ((pos - adjust) * ratio)  + "px";
}
    
function move(){
    
    var pos = measure.offset().top;
    //var pos = docwindow.scrollTop();
        
    background.css({'top' : newPos(pos, 0, 0.5)});//.queue('fx');
        
}
    
    
var didScroll = false;
    
$(window).scroll(function(){
    didScroll = true;
});
 
setInterval(function() {
    if (didScroll) {
        didScroll = false;
        move();
    }
}, 100);