Sprite Sheet Animation with jQuery and CSS - aniJS

aniJS is a jQuery plugin used to create a cross browser image animation by using sprite sheet containing all the frames of the animation and CSS background properties.

You might also like:

• Spritely - Pure HTML & jQuery Background Animation Plugin
• jQuery Animating Sprites Plugin - animateSprite
• Versatile jQuery Product Image Viewer Plugin - SpriteSpin
• jQuery Plugin For Frame-By-Frame Sprites Animations - SpriteClip.js

How to use it:

1. Include the jQuery javascript library and jQuery aniJS in your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/anijs.js"></script>

2. Create a container for the animation.

<div id="controls" class="demo"></div>

3. Create an image sprite sheet and insert it into your javascript.

<script type="text/javascript">
$(document).ready(function () {
$('.demo').anijs({
image: "1.png",
fps: 20, 
frameWidth: 150, 
frameHeight: 150,
isReady : function ($this) {}
});
});
});
</script>

4. The plugin also provides 3 methods to control the animation.

<button class="start">start</button>
<button class="stop">stop</button>
<button class="destroy">destroy</button>
<script type="text/javascript">
$(document).ready(function () {
$(".start").click(function () {
$('#controls').anijs("enable");
});
$(".stop").click(function () {
$('#controls').anijs("disable");
});
$(".destroy").click(function () {
$('#controls').anijs("destroy");
});
});
</script>

---

This awesome jQuery plugin is developed by ryuutatsuo88. For more Advanced Usages, please check the demo page or visit the official website.