JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="header">
<div class="head">
Do It!
</div>
</div>

<div class="parallax">
<div class="content">

    <h1>LET'S DO IT</h1>
    <p>
    Ok! Lets Do It!
    </p>
    
  </div>    
  </div>
  
  <div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus eleifend nisi eget sagittis. Praesent laoreet viverra malesuada. Quisque cursus felis id rhoncus convallis. Phasellus sed leo odio. In at dolor laoreet, pharetra diam in, ultrices mi. Suspendisse et consequat urna. Suspendisse ac lectus mollis, luctus neque ac, pharetra nisi. Curabitur finibus lacus magna, vitae consequat urna mollis sed.</p>

<p>Maecenas nunc est, dictum eget ipsum ut, sagittis convallis leo. Donec suscipit nibh ultricies eros tincidunt, ut consequat enim dignissim. Phasellus sit amet ornare orci, vitae eleifend purus. Donec fringilla ipsum ipsum, quis ornare ligula volutpat eget. Etiam rhoncus eu lectus at suscipit. Sed iaculis augue feugiat vehicula efficitur. Duis lorem massa, dignissim et leo at, dictum bibendum orci. Aenean sed dui diam. Etiam ut hendrerit dolor, at malesuada dolor. Quisque ac magna posuere, egestas velit eu, scelerisque mauris. Ut condimentum eleifend nunc in commodo.</p>

<p>Cras nec sagittis ante, at ultricies eros. Maecenas consequat volutpat sagittis. Quisque pretium mauris vel mi efficitur, sit amet luctus diam sollicitudin. Duis aliquam nisl massa, sit amet fringilla massa vulputate at. Sed dignissim turpis elit, vel efficitur ante aliquet non. Fusce sagittis tristique pretium. Sed fringilla sed orci quis malesuada. Nullam tincidunt mattis eros, fringilla convallis libero consectetur sit amet. Quisque dignissim sollicitudin orci, eget lobortis diam pulvinar sed. Sed vitae orci ut risus pretium feugiat at in orci. Suspendisse quis venenatis erat. Aenean vitae nulla vitae nunc efficitur blandit. Proin sed justo mauris. Morbi sagittis purus vel sapien dignissim, egestas accumsan diam efficitur.</p>

  <p>Lorem ipsum dolor...

CSS

html,
body {
  height: 100% !important;margin:0;padding:0;
}

.header {max-width:600px;margin:auto;}
.head {padding: 20px 10px;}

.parallax {
  background: url(http://www.devstreak.com/wp-content/uploads/2016/01/Parallax-Scrolling-CodePen-Background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  text-align: center;
  padding: 90px 10px;
  background: rgba(29, 25, 29, 0.37);
  
}

.parallax h1 {
  font-size: 24px;line-height:24px;margin:0;
  color: white;
  font-family: "Trebuchet MS"
}

.main {max-width:600px;margin:auto;}

JavaScript

var parallax= document.querySelector(".parallax");

window.addEventListener("scroll", function() {

var scrolledHeight= window.pageYOffset,
limit= parallax.offsetTop + parallax.offsetHeight;
                
if(scrolledHeight > parallax.offsetTop && scrolledHeight <= limit ) {
parallax.style.backgroundPositionY=  (scrolledHeight - parallax.offsetTop) /1.5+ "px";
 
} else {parallax.style.backgroundPositionY=  "0";}
});