Spritesheet Test

by UTree

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>
<div class="spriteContainerD"></div>
<div class="spriteContainerDD"></div>
<h1>Source Image</h1>
<img src="http://qml.ucoz.com/MaemoWorld/BlackDuck.png" alt="" />

CSS

.spriteContainer{
      background-position: 228px 222px;
    width: 76px;
    height: 74px;
    background-image: url(http://qml.ucoz.com/MaemoWorld/BlackDuck.png);
    background-position: 228px 222px;
}
.spriteContainerD{
    width: 76px;
    height: 74px;
        background-position: 228px 222px;
    background-image: url(http://qml.ucoz.com/MaemoWorld/BlackDuck.png);
}
.spriteContainerDD{
    width: 76px;
    height: 74px;
        background-position: 228px 222px;
    background-image: url(http://qml.ucoz.com/MaemoWorld/BlackDuck.png);
}

JavaScript

$('.spriteContainer').playSpriteSheet('gem', '1s', -1, $.keyframe.spriteSheet({
  name: 'gem',
  rows: 1,
  cols: 3,
  width: 228,
  height: 74,
  count: 3
}));
$('.spriteContainerD').playSpriteSheet('gemD', '1s', -1, $.keyframe.spriteSheet({
  name: 'gemD',
  rows: 1,
  cols: 3,
  width: 228,
  height: 148,
  count: 3
}));
$('.spriteContainerDD').playSpriteSheet('gemDD', '1s', -1, $.keyframe.spriteSheet({
  name: 'gemDD',
  rows: 1,
  cols: 3,
  width: 228,
  height: 74,
  count: 3
}));