JS animated display background picture

Jani is a jquery plugin that animates background images. This plugin is basically a substitute for GIF animations, but he has his benefits. All browsers support animated formats in GIF format, and do not require additional JavaScript code and tags. But the downside is that the GIF format has only 256 colors. And you can't control the display of the picture. This plugin displays animations by loading vertical gif frames and then changing the background-postion of the container so that you are free to control.

Characteristics

• A lightweight script
• Very easy to use
• Can be fully customized via CSS
• All browsers support

How to use

1. Download the script and include the jquery framework.

2. Add the following code to the head tag:

12	<script type= "Text/javascript" src= ". /jquery-1.3.2.min.js "></script><script type=" Text/javascript "src=". /jani.js "></script>

3, add the corresponding style in CSS, image address:

12345

<style type= "Text/css" >.animation-1 {background:url (./images/sample-animation.gif) no-repeat left top;} </style>

4. Add a container to display the animation in the page:

1	<div id= "Animation-1" ></div>

5. Add the following code to the head tag:

123456

<script type= "Text/javascript" >$ (document). Ready (function () {$ (' #animation-1 '). Jani ({framewidth:100, frameheight:100, speed:100, totalframes:19}); $ (' #animation-1 '). Jani.play ();}); </script>

Methods of Jani

• Jani.play (); Turn on animation
• Jani.pause (); Pause animation
• Jani.stop (); Stop animation

Parameters

The. Jani () method accepts the following several parameters:

• Width of the Framewidth:frame
• Frameheight: Height of individual frames
• Speed: Animation velocity
• Number of Totalframes:frame
• Loop: Whether to loop animation, default to True

JS animated display background picture