JSFiddle - React, Tailwind, and code Playground

by atomicfalls

HTML

<div id="slidecontainer">
      <div id="slider"></div>
</div>

CSS

#slidecontainer {
position:relative;
left:50px;
width:720px;
height:240px;
overflow:hidden;


}


#slider {
position:absolute;
top: 0px;
left:0px; 
width:10560px; 
height:240px; 
background: url('http://zenzig.com/bbb-sprite.jpg') -0px 0px;


}

JavaScript

var videoObj = {
nframes: 33, // total number of frames
durationTime: 596, // movie run length in seconds
frameWidth: 320, // thumb frame width in pixels
containerWidth: ($("#slidecontainer").innerWidth()) // slidecontainer width in pixels
};

var myVideoObj = Object.create(videoObj)

// determine width of sprite image
var sliderWidth = (myVideoObj.nframes * myVideoObj.frameWidth); 

// functions to animate slider based on mouse position
var animateFramesLeft = function(targetElement, speed) {
    $(targetElement).stop(true).animate({'left': '-=5'},
        {duration: speed, complete: function() {
            animateFramesLeft(this, speed);
          }  
        }
    );
};

var animateFramesRight = function(targetElement, speed) {
    $(targetElement).stop(true).animate({'left': '+=5'},
        {duration: speed, complete: function() {
            animateFramesRight(this, speed);
          }
        }
    );
};


// container to hold slider div (frames sprite is slider div background)
$("#slidecontainer").mouseover(function(e){
    // get container width, divide by 4 to establish low/high speed zones
    // zones ordered 1 - 4, left to right.
    var outerwidth = myVideoObj.containerWidth;
    var fcwidth = Math.floor(outerwidth) /4;
    // get container height (used to determine outside top/bottom)
    var fcheight = $('#slidecontainer').height();
    // get mouse postion, store whole number value in "slide_pos"
    var positionx = (e.pageX - this.offsetLeft);
    var positiony = (e.pageY - this.offsetTop);
    var s_pos = $("#slider").position().left;
    var slide_pos = Math.floor(s_pos);

     // determine where we are with respect to our hot zones
    var zone1 = (positionx >= 2 && positionx <= fcwidth) && (positiony >= 2 && positiony <= fcheight);
    var zone2 = (positionx >= (fcwidth + 1) && positionx <= (fcwidth * 2)) && (positiony >= 2 && positiony <= fcheight);
    var zone3 = (positionx >= (fcwidth * 2 +1) && positionx <= (fcwidth * 3)) && (positiony...