Sprite Sheet Animation with jQuery and CSS - aniJS
File Size: | 415KB |
---|---|
Views Total: | 3618 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.