JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div></div>

CSS

div {
    display: block;
    border: 1px solid #000;
    background: url("http://jira2.itech-service.ru/secure/attachment/16936/Lenta_sprite.png") no-repeat 0px 0px;
}

JavaScript

var cW = 320;
var cH = 420;


var posTop = 0;
var posLeft = 0;
var countLeft = 0;
var countTop = 0;
var $obj = $('div');

$obj.css({
    'width': cW + 'px',
    'height': cH + 'px'
});

var int = setInterval(function () {

    $obj.css({
        'background-position': posLeft + 'px ' + posTop + 'px'
    });
    posLeft = posLeft - cW;
    countLeft++;
    if (countLeft == 7) {
        countLeft = 0;
        posLeft = 0;
        posTop = posTop - cH;
        countTop++;
    }
    if (countTop == 7) {
        countTop = 0;
        posTop = 0;
        //clearInterval(int);
    }

}, 50);