JSFiddle - React, Tailwind, and code Playground

by protron

HTML

<script src="http://stephband.info/jparallax/js/jquery.parallax.min.js"></script>
  <div id="target" class="parallax-port">
      <img class="parallax-layer" src="http://stephband.info/jparallax/images/parallax_sketch/0_sun.png" alt="" />
      <img class="parallax-layer" src="http://stephband.info/jparallax/images/parallax_sketch/1_mountains.png" alt="" />
      <img class="parallax-layer" src="http://stephband.info/jparallax/images/parallax_sketch/2_hill.png" alt="" />
      <img class="parallax-layer" src="http://stephband.info/jparallax/images/parallax_sketch/3_wood.png" alt="" />
  </div>

CSS

.parallax-port {
    position: absolute;
    top:0px; bottom:0px; left:0px; right:0px;
    background: #eeeeee; overflow: hidden;    
}

.parallax-layer {
    position: absolute;
}

JavaScript

jQuery(document).ready(function(){
  var target = jQuery("#target");
  
  target
  .children('img')
  .parallax(
      { mouseport: target },
      { xparallax: -1, yparallax: -0.5, yorigin: .2 },
      { xparallax: 0.2, yparallax: 0.2 },
      { xparallax: 0.5, yparallax: 0.5, yorigin: 1 },
      { xparallax: 0.8, yparallax: 0.8, yorigin: 5 }
  );
});