Spritesheet Test

by Jake Cattrall

HTML

<script src="https://rawgit.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<script src="https://rawgit.com/jQueryKeyframes/Keyframes.Spritesheet/master/keyframes.spritesheet.min.js"></script>
<div class="spriteContainer"></div>

CSS

.spriteContainer{
    width: calc(850px / 17);
    height: calc(395px / 5);
    background-image: url(http://c2.glitch.bz/items/2012-12-06/grand_ol_grinder__x1_tool_animation_png_1354836354.png);
}

JavaScript

$('.spriteContainer').playSpriteSheet('grind', '3s', -1, $.keyframe.spriteSheet({
  name: 'grind',
  rows: 5,
  cols: 17,
  width: 850,
  height: 395,
  count: (5 * 17 - 2)
}));