JSFiddle - React, Tailwind, and code Playground

by farhan2056

HTML

<div class="header-image-inner">
    <img src="https://images.unsplash.com/photo-1492799808351-30d7d3955cac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74696345f3ca20d8a46bf6d692b78c53&auto=format&fit=crop&w=500&q=60" alt="" />
</div>

JavaScript

$(document).ready(function(){
  var images = [
    "https://images.unsplash.com/photo-1518127864129-8d0834d765bc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5acdfad29e7fef07a86e6174e3b1d73c&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1518065336951-d16c043900d6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=05f800ba4e6c18a40a8f7cf12cdd2c35&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1492799808351-30d7d3955cac?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=74696345f3ca20d8a46bf6d692b78c53&auto=format&fit=crop&w=500&q=60"
  ];
  function throttle(fn,delay){
  	let run = true;
    return function(){
    	var ctx = this;
      if(run){
        fn.apply(this,arguments);
        run = false;
      }
	    setTimeout(() => {
      	run =true
      },delay)
    }
  }
  var currentX = 0, currentY = 0;
  var fnn = function(e){
  	console.log('move')
    if(Math.abs(currentX-e.pageX) > 50 || Math.abs(currentY-e.pageY) > 50){
    	currentX = e.pageX;
    	currentY = e.pageY;
    	$('.header-image-inner img').attr('src',images[Math.floor(Math.random()*images.length)]);
    }
  }
  var tfnn = throttle(fnn,5000)
  $('.header-image-inner').mousemove(tfnn)

})