JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<button class="move-sprite">Move background</button>
<span class="current-position">Current background position: <span class="coordinates">0px 0px</span></span>
<label class="fix-icon-area"><input type="checkbox">Fixed size</label>
<div class="icon-area"></div>

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    font: normal 12px/16px Arial, sans-serif;
    color: #999;
}

.move-sprite {
	color: white;
	background: #018be4;
	padding: 5px 18px;
    margin: 10px 0 0 10px;
	outline: none;
	font: normal 12px/16px Arial, sans-serif;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.21);
	border-bottom-color: rgba(0,0,0,0.34);
	text-shadow: 0 1px 0 rgba(0,0,0,0.15);
	box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 
				0 2px 0 -1px rgba(0,0,0,0.13), 
				0 3px 0 -1px rgba(0,0,0,0.08), 
				0 3px 13px -1px rgba(0,0,0,0.21);
}

.move-sprite:active {
	top: 1px;
	border-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21);
	box-shadow: 0 1px 0 rgba(204,204,204,0),0 1px rgba(0,0,0,0.05) inset;
	position: relative;
}

.move-sprite:hover{
	color: #FFF;
	text-decoration: none;
}

.current-position{
    margin-left: 5px;
}

.coordinates{
    font-weight: 700;
}

.fix-icon-area{
    display: block;
    margin: 10px 0 0 10px;
}

.icon-area{
    width: 20px;
    height: 20px;
    border: 1px #CCC solid;
    border-radius: 5px;
    margin: 10px;
    background: url(//hypnocolor.ru/files/sample-sprite.png) no-repeat top left transparent;
    -webkit-transition: .2s background-position;
    -moz-transition: .2s background-position;
    -ms-transition: .2s background-position;
    -o-transition: .2s background-position;
    transition: .2s background-position;
}

JavaScript

$(function(){
    function randomFrom(array) {
        return array[Math.floor(Math.random() * array.length)];
    }
    
    $('.fix-icon-area :checkbox').click(function(){
        if($(this).is(':checked')){
        $('.icon-area').stop().animate({
            'width': '100px',
            'height': '100px'
        }, 200);
        } else {
        $('.icon-area').stop().animate({
            'width': '20px',
            'height': '20px'
        }, 200);
        }
    });
    
    $('.icon-area').hover(function(){
        if(!($('.fix-icon-area input').is(':checked'))){
            $('.icon-area').stop().animate({
                'width': '100px',
                'height': '100px'
            }, 200);
        }
    }, function(){
        if(!($('.fix-icon-area input').is(':checked'))){
            $('.icon-area').stop().animate({
                'width': '20px',
                'height': '20px'
            }, 200);
        }
    });
    
    $('.move-sprite').click(function(){
        var bgPositions = ['0px', '-20px', '-40px', '-60px', '-80px'],
            xPos = randomFrom(bgPositions),
            yPos = randomFrom(bgPositions);
        $('.icon-area').css({
            'background-position': xPos + ' ' + yPos
        }, 150);
        $('.coordinates').text(xPos+' '+yPos)
    });
});