JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div id="bg">
    <div id="content">CONTENT</div>
</div>
<div id="log"></div>

CSS

#bg{
    width:300px;
    height:100px;
    background:url(http://lorempixel.com/output/transport-q-c-640-480-7.jpg);    
}

#content{
    width:300px;
    height:100px;
    color:white;
    font-size:36px;
    line-height:100px;
    text-align:center;

}

JavaScript

//bg follow mouse with ease
var bg = $("#bg");
    
    
bg.mousemove(function(event) {
    var xPos = event.pageX;
  $("#log").text(xPos);
    TweenLite.to(bg, .5, {css:{backgroundPosition:xPos + "px"}});
});