JSFiddle - React, Tailwind, and code Playground

by Victor Alekseev

HTML

<section>
     <div>This Is A Text...</div>
 </section>
 <section class="s2">
     <div>This Is A Second Text...</div>
 </section>

CSS

* {
    margin: 0 auto;
    padding: 0;
    font-family: Open Sans, sans-serif;
}
html, body {
    height: 100%;
}

section {
    height: 100%;
    background: url('http://fonday.ru/images/tmp/9/0/original/9025e2p0o0Ri3QzU6wQ4i1CN4HSUzw0.jpg');
    background-size: cover;
    position: relative;
}
section > div {
    display: block;
    height: 100px;
    width: 100%;
    color: #ececec;
    font-size: 44px;
    line-height: 100px;
    font-weight: 100;
    position: absolute;
    top: calc(50% - 50px);
    text-align: center;
    background: rgba(0,0,0,.6);
}

JavaScript

$(window).scroll(function(){
    var sc = $(this).scrollTop();
    $('section > div').css({
        'transform' : 'translate(0%, -' + sc/2 + '%'
    });
    
    $('.s2 > div').css({
    	'transform' : 'translate(0% -' + scrolled /20 + '%'
    })
});