JSFiddle - React, Tailwind, and code Playground

by Dinesh Singh

HTML

<div class="rotate">
<img src="http://s8.postimg.org/uxggntvir/sprite.jpg" />
</div>

CSS

.rotate
{max-width:450px;
	margin:auto;
	overflow:hidden;
	border:1px solid #000;
}
.rotate img
{
	position: relative;
	left:-1360px;
}

JavaScript

function move ( e ) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        //$( "#log" ).text(x +', '+ y);if (x > 0)
    {
        $(".rotate img").css({"left":"0px"});
    }
    
    if (x > 60)
    {
        $(".rotate img").css({"left":"-450px"});
    }
    if (x > 120)
    {
        $(".rotate img").css({"left":"-900px"});
    }
    if (x > 180)
    {
        $(".rotate img").css({"left":"-1350px"});
    }
    if (x > 240)
    {
        $(".rotate img").css({"left":"-1800px"});
    }
    if (x > 300)
    {
        $(".rotate img").css({"left":"-2250px"});
    }
    if (x > 360)
    {
        $(".rotate img").css({"left":"-2700px"});
    }      
          
    }
    
    
    $(document).ready(function(){
        $( '.rotate' ).on( 'vmousedown', function (e) {
            //When mouse is clicked, started following mouse position (move)
            $(this).on('vmousemove', move);
            // Stop the select event from occuring (so you don't try an drag the image)
            e.preventDefault();
        });
        // Use the mouseup event to unbind the event listener and do any finishing up
        $( '.rotate' ).on( 'vmouseup', function (e) {
            $(this).unbind('vmousemove', move); 
        });
        
    });