jAni
Framework: jQuery Listed in: Effects
jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.
Features
- Light-weight script
- Easy to integrate
- Fully customizable via CSS
- Works with all modern browsers
How to Use
1.) Download jAni script. The package already contains jQuery framework.
2.) Add the following code to your <head>…</head> tag to connect the jQuery framework and jAni plugin. (Make sure paths to files are correct.)
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../jani.js"></script>
3.) Add a style containing the url to your background with animation (this may be added to a separate CSS document or inside the <head>…</head> tag):
<style type="text/css"> .animation-1 { background: url(./images/sample-animation.gif) no-repeat left top; } </style>
4.) Add an empty DIV which will display animation in your document:
<div id="animation-1"></div>
5.) Add the following code to your <head>…</head> tag to initialize jAni and start the animation.
<script type="text/javascript"> $(document).ready(function(){ $('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 }); $('#animation-1').jani.play(); }); </script>
That’s it ;) Click the Demo button to see it in action.
jAni Methods
jani.play()
Start playing animation.
jani.pause()
Pause animation.
jani.stop()
Stop animation.
Parameters
The table below contains a list of parameters accepted by the .jani() function.
| Parameters | Description |
|---|---|
| frameWidth | Width of a single frame. |
| frameHeight | Height of a single frame. |
| speed | Animation speed. |
| totalFrames | Total frames in the animation. |
| loop | Loop an animation or not. By default, value is true. |
Popular Categories
View All- Effects (7)
- Forms (6)
- Lightboxes (5)
- Photo Galleries (1)
- Preloaders (1)
- Tables (1)
- Tooltips (3)
- User Interface (10)
AJAX Tutorials
View All- How to Add Hints & Auto Focus Form Fields using jQuery
- Convert Images to Grayscale
- Advanced Plugins Development with ExtJS
- Rotate Images Using JavaScript
- Create Custom Cursors without .cur File
- Convert ASCII Character to Hex, Decimal and Binary Code
ExploreJQuery
March 20, 2010
Awsome! great techniques i love to do animations through JQuery its easy.
Tomodian
June 13, 2010
Hey nice plugin!
I am using this to play simple animation alternative of Flash.
Blue
August 15, 2010
Dead on, love it. Have you done more examples? Will add to our BLOG this afternoon with link back.