jAni - jQuery Plugin for Cartoon-like Background Image Animation (alternative to animated GIF)

Framework: jQuery Listed in: Effects

That's right! For only $19.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!
jAni

Description

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

  1. Light-weight script
  2. Easy to integrate
  3. Fully customizable via CSS
  4. 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.
That's right! For only $19.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!

manoj1

January 10, 2013

nice tutorial. thank you guys for posting it.

Mark Topper

May 11, 2012

How can I use multible div boxes with this effects on. I tried copying it all and changed animation-1 to animation-2, but then none of them works. Like jAni is only meant to work for one?

Greg

May 10, 2012

what tool/spec’s are you making the graphic with?
tia,

larural

March 12, 2012

hi,… i have the same problem, i can’t make more the one gifanimation in a page,… somebody know anything?
thank you,

Darren – ajaxBlender

February 16, 2012

Just an update…

Thank you guys for the comments (and emails) for the interest in a JavaScript alternative to an animated GIF. We are compiling the above items into a list for an updated version of the script. If there are any other requests, let us know.

Thanks!

Darren

DaSt

September 27, 2011

I found a way to make it work as expected :

On line 61 change
bgPos -= settings.frameHeight – 1;
to
bgPos -= settings.frameHeight – 0;

Then using my 130*2070 / 23 frames it works perfectly ;)

Now i’m looking for a way to have multiple animations on the same page. Any idea ?

Thx

DaSt

September 27, 2011

Hey :)
Nice script ^^
I just can it done right tho.. I made a 130*2070 gif meaning 23 frames of 130*90 but it shifts it wrong so that it doesnt show what its supposed to show. really annoying…
I tried the zoom thing and double checked everything. I also tried different speeds but still the same. Any idea ?

Thanks

abbas

September 5, 2011

This is not a CSS issue. It is a browser issue. When zooming in or out on a page, everything zooms.

YumKaax

September 2, 2011

Im trying my best to use this plug in, but it seems i cant get it right… Im practicly using your very same code from the Demo page, and i still have this “bouncing” i dont want.. I tried everything, even using squared 100×100 px images, and still if i want the script to go 100px down, it still gives me a part of the square above (at 100 velocity it looks like its bouncing)… What should i do???

eddy

July 17, 2011

nice alternative to GIF animation. Better than flash for simple animations.

I have a problem. I really couldn’t do animation on multiple div tags.

shawn

June 2, 2011

How can I get two animations working simultaneously on one page? It seems like the 1st animation doesn’t animate.

Ahmet Sali

June 1, 2011

hi really nice and simple plugin, thanks! just an advice when it reaches to end of the image, if it animates back to the start of the image, it should do a sleek loop animation. i had to do this manually on the image, bu it would be nicer if the plugin supports that, thanks.

ajaxBlender.com

May 30, 2011

Francois Longpre… sorry but the plugin does not support this feature at this time. what type of action is needed? we might could add it to a future version

Francois Longpre

May 14, 2011

Wonderful script! I am trying to use it in a flash alternative for a fancy navigation and it works great. The only thing missing to me is the ability to perform an action at the end of a non looping animation. Is there a way?

MechanisM

January 26, 2011

It is possible to make links to specific frames?
for example on load I need 4th frame, and want links next or previous. and also for each frame.

Tomodian

June 13, 2010

Hey nice plugin!
I am using this to play simple animation alternative of Flash.

Leave a comment

Your name

October 31, 2014

Spam protection. Enter result of expression you see in the box below.

7 + 5 =