JSFiddle - React, Tailwind, and code Playground

HTML

<div class="padding">Scroll down...</div>
<div id="parallax">
    <div class="plx_layer layer1"></div>
    <div class="plx_layer layer2"></div>
    <div class="plx_layer layer3"></div>
    <div class="plx_layer layer4"></div>
    <div class="plx_layer layer5"></div>
    <div class="plx_layer layer6"></div>
</div>
<div class="padding"></div>

CSS

.padding {
  height: 1000px;
  border: 1px solid blue;
}
#parallax {
  border: 1px solid red;
  width: 100% !important;
  height: 800px !important;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
.plx_layer {
  width: 100%;
  height: 400px !important;
  background-position: bottom center;
  background-size: 50% auto; /* STRETCHES WIDTH TO BE RESPONSIVE FOR SCREEN SIZE */
  background-repeat: no-repeat;
  position: absolute;
}
.layer1 {
  background-image: url("http://www.stickpng.com/assets/images/580b57fbd9996e24bc43bba6.png");
  z-index: 1;
}
.layer2 {
  background-image: url("http://www.stickpng.com/assets/images/580b57fbd9996e24bc43bba6.png");
  z-index: 2;
}
.layer3 {
  background-image: url("http://www.stickpng.com/assets/images/580b57fbd9996e24bc43bba6.png");
  z-index: 3;
}
.layer4 {
  background-image: url("http://www.stickpng.com/assets/images/580b57fbd9996e24bc43bba6.png");
  z-index: 4;
}
.layer5 {
  background-image: url("http://www.stickpng.com/assets/images/580b57fbd9996e24bc43bba6.png");
  z-index: 5;
  }
.layer6 {
  background-image: url("http://www.stickpng.com/assets/images/580b57fbd9996e24bc43bba6.png");
  z-index: 6;
}

JavaScript

var layer1 = document.querySelector(".layer1");
var layer2 = document.querySelector(".layer2");
var layer3 = document.querySelector(".layer3");
var layer4 = document.querySelector(".layer4");
var layer5 = document.querySelector(".layer5");
var layer6 = document.querySelector(".layer6");

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

function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}

window.addEventListener("DOMContentLoaded", scrollLoop, false);

var xScrollPosition;
var yScrollPosition;

function scrollLoop() {
    xScrollPosition = window.scrollX;
    yScrollPosition = window.scrollY - parallax.offsetTop;

    setTranslate(0, yScrollPosition * -1.6, layer1);
    setTranslate(0, yScrollPosition * -1.5, layer2);
    setTranslate(0, yScrollPosition * -1.4, layer3);
    setTranslate(0, yScrollPosition * -1.3, layer4);
    setTranslate(0, yScrollPosition * -1.2, layer5);
    setTranslate(0, yScrollPosition * -1.1, layer6);

    requestAnimationFrame(scrollLoop);
}