JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<div class="cont">
    <div id="hplogo0" style="left: 307px; top: 48px; width: 88px; height: 89px; background-position: 0px 0px;"></div>
    <div id="hplogo1" style="left: 307px; top: 48px; width: 89px; height: 89px; background-position: -88px 0px;"></div>
    <div id="hplogo2" style="left: 307px; top: 48px; width: 91px; height: 89px; background-position: -177px 0px;"></div>
    <div id="hplogo3" style="left: 305px; top: 49px; width: 93px; height: 89px; background-position: -268px 0px;"></div>
    <div id="hplogo4" style="left: 305px; top: 50px; width: 93px; height: 88px; background-position: -361px 0px;"></div>
    <div id="hplogo5" style="left: 305px; top: 50px; width: 93px; height: 88px; background-position: -454px 0px;"></div>
    <div id="hplogo6" style="left: 306px; top: 52px; width: 92px; height: 86px; background-position: -547px 0px;"></div>
    <div id="hplogo7" style="left: 305px; top: 53px; width: 93px; height: 84px; background-position: -639px 0px;"></div>
    <div id="hplogo8" style="left: 305px; top: 54px; width: 94px; height: 83px; background-position: -732px 0px;"></div>
    <div id="hplogo9" style="left: 306px; top: 54px; width: 93px; height: 83px; background-position: -826px 0px;"></div>
    <div id="hplogo10" style="left: 307px; top: 54px; width: 92px; height: 83px; background-position: -919px 0px;"></div>
    <div id="hplogo11" style="left: 307px; top: 54px; width: 92px; height: 83px; background-position: -1011px 0px;"></div>
    <div id="hplogo12" style="left: 308px; top: 54px; width: 90px; height: 83px; background-position: -1103px 0px;"></div>
    <div id="hplogo13" style="left: 308px; top: 54px; width: 90px; height: 83px; background-position: -1193px 0px;"></div>
    <div id="hplogo14" style="left: 306px; top: 53px; width: 91px; height: 84px; background-position: -1283px 0px;"></div>
    <div id="hplogo15" style="left: 306px; top: 53px; width: 91px; height: 84px; background-position: -1374px 0px;"></div>
    <div id="hplogo16" style="left:...

CSS

.cont {
    position: ralative;
}
.cont div {
    background: url(http://i141.photobucket.com/albums/r73/mohanvincy/bisagunsa/graham11-hp-sprite.png) no-repeat scroll transparent;
    position: absolute;
}

JavaScript

var $frames = $('.cont div').hide();
var l = $frames.length;
var n = 0;
var t = setInterval(function() {
    n++;
    if (n >= l) {
        $frames.hide();
        n = 0;
    }
    $frames[n].style.display = 'block';

}, 100);