jQuery CSS sprite animation plugin, by Roman Kühl.
Check out the example.
CSS:
.animatic {
width: 50px;
height: 50px;
background: transparent url("sprite.jpg") no-repeat;
}
HTML:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-animatic.js" type="text/javascript"></script>
<div class="animatic"></div>
JS:
$(document).ready(function() {
$(".animatic").animatic();
});
frames
number of animation frames
fps
frames per secound
direction
direction (frames on sprite)
JS:
// global settings
$(document).ready(function() {
$(".animatic").animatic({
frames : 4
, fps : 15
, direction : 'right'
});
});
HTML:
<div class="animatic" data-frames="24" data-fps="10" data-direction="down"></div>