JSFiddle - React, Tailwind, and code Playground

by Trina Lu

HTML

<div class="container">

  <section class="parallax" id="p1">
    <p>
      some content in here...
    </p>
  </section>
  <section class="block">
    This is block one.
  </section>
  <section class="parallax" id="p2"></section>
  <section class="block">
    This is block two.
  </section>
  <section class="parallax" id="p3"></section>

</div>

CSS

.container{
  width:100%;
  background-color:#8bc34a;
  background-attachment: fixed;
  background-size:cover;
  background-repeat:no-repeat;
}
.parallax{
  background-attachment: fixed;
  background-size:cover;
  background-repeat:no-repeat;
  height:500px;
  width:100%;
}
.parallax p {
  padding: 10px;
  background: rgba(255, 255, 255, 0.57);
}

.block{
  height: 200px;
  width: 100%;
  background: rgba(0, 0, 0, 0.68);
  color:#FFF;
  text-align:center;
  line-height: 200px;
}

#p1{
  background-image: url("http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg");
}

#p2{
  background-image: url("http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg");
}

#p3{
  background-image: url("http://www.minimit.com/images/picjumbo.com_DSC_3274.jpg");
}

JavaScript

var parallaxs = document.querySelectorAll('.parallax');
var padding = 0, prev = 0;
window.onscroll = function(e){
	var top = window.pageYOffset;
  if(prev <= top){ //scrolling down
  	padding += 2;
  }else{
  	padding -= 2;
  }
  prev = top;
  parallaxs.forEach(p=>{
  	p.style.backgroundPositionY = -padding + 'px';
  });
}