JSFiddle - React, Tailwind, and code Playground

by joshkrz

HTML

<div id=proj-img-1>Hello World</div>

CSS

#proj-img-1 {
    width: 200px;
    height: 200px;
    background-color: #336699;
    color: white;
    font-size: 24px;
    font-weight: bold;
    border-radius: 5px;
    padding: 1em;
    transition: all 100ms;
}

JavaScript

var timer = 0, lastmoved = 0, mouseX, $projImg1 = $("#proj-img-1"), s = $projImg1.width(), interval = 1000;
$(document).mousemove(function(e) {
    function movenow() {
      var v = ($( window ).width());
      var m = mouseX;  
      var r = s-v; 
      var dx = ((m/v)*100)/100; 
      var diff = r*dx;
      $projImg1.css( "margin-left", -diff);
      lastmoved = Date.now();
    }
    mouseX = e.pageX;
    clearTimeout(timer);
    timer = requestAnimationFrame(movenow);
    if (Date.now() - lastmoved > interval)
        movenow();
});