What is AniDg?
AniDg 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 AniDg loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation. For Better quality you can call PNG, JPG, GIF images in background image sprite as per your requirements.
Demo
Features
- Light-weight script (Only 1Kb :))
- Easy to integrate
- Fully customizable via CSS
- Works with all modern browsers 🙂
How to Use
METHOD #1: EASY
Simply place the following code anywhere inside thetag of your webpage:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://demo.web3designs.com/jquery-ani.dg.min.js"></script>
METHOD #2: ADVANCED
STEP ONE: Download AniDg.zip or http://demo.web3designs.com/AniDg.zip. The package already contains all files used in this demo.
STEP TWO: Unzip and place the file jquery-ani.dg.min.js in the same location as the webpage that is displaying the animation. (Make sure paths to files are correct.)
STEP THREE: include the following code in the <head>…</head> section of your webpage:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="jquery-ani.dg.min.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 AniDg and start the animation.
<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').anidg({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
$('#animation-1').anidg.play();
});
</script>
That’s it 😉 Click the Demo button to see it in action.
Public Functions
anidg.play()
Start playing animation.
anidg.pause()
Pause animation.
anidg.stop()
Stop animation.
Parameters
The table below contains a list of parameters accepted by the .anidg() 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. |
Posted by: Dhiraj kumar
HTML5, CSS3, JQuery Tips & Tricks 
A non minified version would be nice. Is it possible to get that version?
In the css part of the example, shouldn’t ‘.animation-1’ be ‘#animation-1’?
Thanks Pong, css modified.
Hi there. Great script. But how i do to stop the sequence on the last frame? When loop is false, the sequence stops on the first frame. I want the stops on the last frame.