Crazy easy SpriteSheet implementation

by Admiral Potato

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Crazy easy SpriteSheet implementation</title>
    </head>
    <body class="data">
            <div id="filter"></div>
    </body>
</html>

CSS

#filter{
    position: absolute;
    background-image: url('http://www.anony.ws/i/2012/09/12/kxnK8.png');
    width: 768px;
    height: 768px;
    background-repeat: no-repeat;
    background-color: #ccc; 
}

JavaScript

var dataFilterAnimation = {
    $element: $('#filter'),
    frame: 0,
    numFrames: 96,
    columns: 10,
    width: 768,
    update: function (){
        var t = this;
        t.$element.css({
            backgroundPosition: (-t.width * (t.frame % t.columns)) + 'px ' + (-t.width * Math.floor(t.frame / t.columns)) + 'px'
        });
        t.frame += 1;
        t.frame %= t.numFrames;
    }
};

setInterval(function(){dataFilterAnimation.update();}, 1000 / 40);