JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="backdrop">
    <div class="direction left"></div>
    <div class="direction right"></div>
</div>
<div id="pos"></div>

CSS

.backdrop{
    position:relative;
    height:300px;
    width:400px;
    border:3px solid #6699ff;
background: url('http://www.intraligi.com/tl_files/si/projekte/fashion-pattern-2/fashion-logo-pattern-intraligi-08.jpg') 0 0 repeat-x;
}

.direction{
    position:absolute;
    width:50%;
    height:100%;
}
.left{left:0;top:0;}
.right{right:0;top:0;}

JavaScript

var x=0, 
    y=0,
    rate=0,
    maxspeed=10;
var backdrop = $('.backdrop');

$('.direction', backdrop).mousemove(function(e){
    var $this = $(this);
    var left = $this.is('.left');
    
    if (left){
        var w = $this.width();
        rate = (w - e.pageX - $(this).offset().left + 1)/w;
    }
    else{
        var w = $this.width();
        rate = -(e.pageX - $(this).offset().left + 1)/w;
    }
});

backdrop.hover(
    function(){
        var scroller = setInterval( moveBackdrop, 30 );
        $(this).data('scroller', scroller);
    },
    function(){
        var scroller = $(this).data('scroller');
        clearInterval( scroller );
    }
);   

function moveBackdrop(){
    x += maxspeed * rate;
    var newpos = x+'px '+y+'px';
    backdrop.css('background-position',newpos);
}