JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

Move Background<br />
<div id="moveme"></div>

Animate Background<br />
<div id="animateme"></div>

CSS

#moveme, #animateme{
    height:150px;
    width:150px;
background:url(http://lorempixel.com/output/abstract-q-c-300-300-8.jpg)   
}

JavaScript

$("#moveme").bind('mousemove', function(e){
 
$(this).css({backgroundPosition: e.pageX + 'px ' + e.pageY + 'px' });

});      

$.easing.smoothmove = function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
    }; 

$("#animateme").bind('mousemove', function(e){

$(this).animate({
  'background-position-x': e.pageX,
  'background-position-y': e.pageY
}, {queue:false,duration:200,easing:'smoothmove'});

});