JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://stephband.info/jparallax/js/jquery.parallax.min.js"></script>
<div id="target" class="parallax-port">
  <img class="parallax-layer" src="//kuzya.com/img/roomBg.jpg"
  alt="" />
  <img class="parallax-layer" src="//kuzya.com/img/rusoScared.png"
  alt="" />
  <img class="parallax-layer" src="//kuzya.com/img/arm2.png" alt=""
  />
  <img class="parallax-layer" src="//kuzya.com/img/arm.png" alt=""
  />
</div>

CSS

#target {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.parallax-viewport {
  position: relative;
  /* relative, absolute, fixed */
  overflow: hidden;
}
.parallax-layer {
  position: absolute;
}

JavaScript

var target = jQuery("#target");

      target.children('img')
        .parallax({
        mouseport: target
        }, {
        xparallax: 0.1,
        yparallax: 0.1      
          // BG layer
        }, {
        xparallax: 0.6,
        yparallax: 0.3
      }, // Ruso layer options
      {
        xparallax: 0.9,
        yparallax: 0.9,
        decay: 0.8
      }, // Left arm 
      {
        xparallax: 0.9,
        yparallax: 0.9,
        decay: 0.9
      } // Right arm
      );