Jquery background image animation 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>
Methods:
jani.play()
Start playing animation.
jani.pause()
Pause animation.
jani.stop()
Stop animation.
Parameters:
ParametersThe 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. |
![[ Stumble Upon ]](../assets/images/stubmleupon_bookmarking_icon.gif){kind=icon}
![[ Facebook ]](../assets/images/facebook_bookmarking_icon.gif){kind=icon}
![[ del.icio.us ]](../assets/images/delicious_bookmarking_icon.gif){kind=icon}
![[ furl ]](../assets/images/furl_bookmarking_icon.gif){kind=icon}
![[Sphinn]](../assets/images/sphinn_bookmarking_icon.gif){kind=icon}
![[ Digg ]](../assets/images/digg_bookmarking_icon.gif){kind=icon}
![[ Twitter ]](../assets/images/twitter_bookmarking_icon.gif){kind=icon}
![[ Technorati ]](../assets/images/technorati_bookmarking_icon.gif){kind=icon}
![[ Reddit ]](../assets/images/reddit_bookmarking_icon.gif){kind=icon}
![[ Subscribe To RSS Feeds ]](../assets/images/rss_feeds.gif){kind=small}
