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>
<h1>Source Image</h1>
<img src="http://i.imgur.com/wqjhb7I.png" alt="" />

CSS

.spriteContainer{
    width: 30px;
    height: 30px;
    background-image: url(http://i.imgur.com/wqjhb7I.png);
}

JavaScript

$('.spriteContainer').playSpriteSheet('gem', '3s', -1, $.keyframe.spriteSheet({
  name: 'gem',
  rows: 6,
  cols: 7,
  width: 210,
  height: 180,
  count: 39
}));