JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<section id="hero">
  <div id="scene" class="hero parallax" data-relative-input="true">
    <div class="layer1" data-depth="0.2"></div>
    <div class="layer2" data-depth="0.4"></div>
    <div class="layer3" data-depth="0.6"></div>
  </div>
        
  <!--div class="parallax" data-relative-input="true" style="transform: translate3d(0px, 0px, 0px) rotate(0.0001deg); transform-style: preserve-3d; backface-visibility: hidden; pointer-events: none;">
  
    <div class="layer1" data-depth="0.2" style="transform: translate3d(-29.3px, -31.2px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: relative; display: block; left: 0px; top: 0px;"></div>
    <div class="layer2" data-depth="0.4" style="transform: translate3d(-58.6px, -62.3px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;"></div>
    <div class="layer3" data-depth="0.6" style="transform: translate3d(-87.9px, -93.5px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;"></div>
  </div-->


  <div style="min-height: 900px"></div>
</section>

CSS

body {
  padding: 0;
  margin: 0;
}

#hero {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  background: url(https://beefree.io/wp-content/themes/bee2017/img/home-page-2020/hero-bg-2020.png) no-repeat top #f6f9fc;
  background-image: -webkit-linear-gradient(0deg, #784386, #6271bc 25% #12a2f2 50%, #00bcd2 75%, #19c2b4);
  background-image: -o-linear-gradient(0deg, #784386, #6271bc 25% #12a2f2 50%, #00bcd2 75%, #19c2b4 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(#784386), color-stop(25%, #6271bc), color-stop(75%, #00bcd2), to(#19c2b4));
  background-image: -webkit-linear-gradient(left, #784386, #6271bc 25% #12a2f2 50%, #00bcd2 75%, #19c2b4);
  background-image: -o-linear-gradient(left, #784386, #6271bc 25% #12a2f2 50%, #00bcd2 75%, #19c2b4 100%);
  background-image: linear-gradient(90deg, #784386, #6271bc 25% #12a2f2 50%, #00bcd2 75%, #19c2b4);
  position: relative;
  overflow: hidden;
  -webkit-background-size: 100% 70%;
  background-size: 100% 70%;
}
#hero .parallax {
    position: absolute;
    left: -200px;
    top: -100px;
    width: 100%;
    z-index: 1;
}
#hero .parallax div {
    width: 2200px;
    height: 950px;
}
#hero .parallax .layer1 {
    background: url(https://beefree.io/wp-content/themes/bee2017/img/home-page-2020/parallaxes/parallax1-christmas.png) center center repeat;
}

#hero .parallax .layer2 {
    background: url(https://beefree.io/wp-content/themes/bee2017/img/home-page-2020/parallaxes/parallax2-christmas.png) center center no-repeat;
}
#hero .parallax .layer3 {
    top: 200px;
    background: url(https://beefree.io/wp-content/themes/bee2017/img/home-page-2020/parallaxes/parallax3-christmas.png) center center no-repeat;
}

JavaScript

new Parallax(document.getElementById('scene'));