Spritemap Animation Test

Testing out a animation solution using spritemaps. Kind of like how retro games used to do it.

by Pete Fecteau

HTML

<div id="sprite" class="img"></div>
<div id="animation" class="img">Hello again</div>

CSS

#sprite {
    width: 3150px;
    height: 60px;
}
#animation {
    width: 200px;
    height: 60px;
    overflow: hidden;
}

.img {    
    background-repeat: no-repeat;
    background-image:...

JavaScript

// js spritemap animation
// constants
var COUNTER_MAX = 14,
    OFFSET = -200,
    FRAMERATE = 100;

// variables
var _counter = 0,
    _animElm = document.getElementById('animation'),
    _supportBgPosX = false;

// functions    
function play() {
    // update counter
    _counter++;
    if (_counter > COUNTER_MAX) {
        _counter = 0;
    }

    // show current frame
    if (_supportBgPosX) {
        _animElm.style.backgroundPositionX = (_counter * OFFSET) + 'px';
    } else {
        _animElm.style.backgroundPosition = (_counter * OFFSET) + 'px 0';
    }

    // next frame    
    setTimeout(play, FRAMERATE);
}

// check if browser support backgroundPositionX
if (_animElm.style.backgroundPositionX != undefined) {
    _supportBgPosX = true;
}

// start animation
play();