JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<img class="parallax" style="width:12em" src="https://howdoweb.com//local/howdoweb.com/uploads/images/2020/6/1592159635087_asset 6.svg">

<img class="parallax" style="position:absolute; left:200px; top:300px; width:12em" src="https://howdoweb.com//local/howdoweb.com/uploads/images/2020/6/1592159635087_asset 6.svg">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest

<img class="parallax" style="position:absolute; right:0; top:200px; width:12em" src="https://howdoweb.com//local/howdoweb.com/uploads/images/2020/6/1592159635087_asset 6.svg">

<img class="parallax" style="width:12em" src="https://howdoweb.com//local/howdoweb.com/uploads/images/2020/6/1592159635087_asset 6.svg">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest

<img class="parallax" style="width:12em" src="https://howdoweb.com//local/howdoweb.com/uploads/images/2020/6/1592159635087_asset 6.svg">


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest

<img class="parallax" style="width:12em"...

JavaScript

const createTrottledEvent = function(type, name, el){
    el = el || window;
    
    let running = false;
    const func = function() {
    	
      if (running) return;
      running = true;
      
      requestAnimationFrame(function(){
        el.dispatchEvent(new CustomEvent(name));
        running = false;
      });
    };
    
    el.addEventListener(type, func);
  };
  
  createTrottledEvent("scroll", "optimizedScroll");
  
 
const copyBoundRect = function (rect) {
	/*Convert getBoundingClientRect to a regular object*/
	return {
		x: rect.x,
		y: rect.y,
		top: rect.top,
		left: rect.left,
		bottom: rect.bottom,
		right: rect.right,
		width: rect.width,
		height: rect.height
	};
};
 
  
  class NeonParallax {
  	
    constructor(settings={}) {
    	
      const defaults = {
      	wrapper: null,
        center: true,
      	percentage: 0.5,
      	swap: false,
      	x: -3,
        y: 2,
        horizontal: true,
        vertical: true
      };
      
      this.options = Object.assign({}, defaults, settings);
      
      this.items = new Map();
      
      this.windowHeight = window.innerHeight;
      this.windowWidth = window.innerWidth;
      
      this._onScroll = this._onScroll.bind(this);
      window.addEventListener("optimizedScroll", this._onScroll);
    }
    
    getScrollPosition() {
    	
      const oldY = this.posY;
     	const oldX = this.posX;

      this.posY = this.options.wrapper ? this.options.wrapper.scrollTop : (document.documentElement || document.body.parentNode || document.body).scrollTop || window.pageYOffset;
      this.posX = this.options.wrapper ? this.options.wrapper.scrollLeft : (document.documentElement || document.body.parentNode || document.body).scrollLeft || window.pageXOffset;
      // If option relativeToWrapper is true, use relative wrapper value instead.
      
      if (this.options.relativeToWrapper) {
        const scrollPosY = (document.documentElement || document.body.parentNode || document.body).scrollTop...