JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div class="homeSlider">
    <div class="slide">
    </div>
</div>

CSS

.homeSlider {width: 100%; height: 400px; background: red;}
.homeSlider .slide {width:100%; height: 100%; background: url(http://1.bp.blogspot.com/-JHKDpZ5orFc/T0523m_rAlI/AAAAAAAAAEU/zYZv__hk74I/s1600/Panorama_by_erikcollinder.jpeg) 0 0;}

JavaScript

//MOUSE MOVE, INVERT BACKGROUND POSITION
var animating = false;
jQuery('.homeSlider').mousemove(function(move){
    var $slider = jQuery('.homeSlider .slide');
    var moveMouse = (move.pageX * -1 / 3);
    var bgPos = $slider.css('background-position-x');
    
    if (!animating && Math.abs(moveMouse - parseInt(bgPos)) > 10) {
        animating = true;
        $slider.animate({
            'background-position-x': moveMouse + 'px'
        }, 400);
        setTimeout(function() {
            animating = false;
        }, 400);
    } else if (!animating) {
        $slider.css({
            'background-position-x': moveMouse + 'px'
        });
    }
});
//MOUSE LEAVE, ANIMATE BACKGROUND TO START POSITION
jQuery('.homeSlider').mouseleave(function(){
    jQuery('.homeSlider .slide').animate({
        'background-position-x': '0'
    }, 400);
});