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

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

Framework: jQuery Listed in: Effects

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

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.)

{code type=html}
<script type=”text/javascript” src=”../jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”../jani.js”></script>
{/code}

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):

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

4.) Add an empty DIV which will display animation in your document:

{code type=html}
<div id=”animation-1″></div>
{/code}

5.) Add the following code to your <head>…</head> tag to initialize jAni and start the animation.

{code type=php}
<script type=”text/javascript”>
$(document).ready(function(){
$(’#animation-1′).jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
$(’#animation-1′).jani.play();
});
</script>
{/code}

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.

Leave a Comment

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.

Fastest Live Chat

October 28, 2010

Great and easy to do animation in Jquery

Valikonen

December 15, 2010

Very cool effect, thanks. If you want to see menus, web site trends, galleries etc, visit http://www.1artmedia.com , you have online demo and free download. Bye!

online trading in india

December 31, 2010

Animation in jquery wonderful.

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.

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?

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

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.

shawn

June 2, 2011

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

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.

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???

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.

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

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

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

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,

Greg

May 10, 2012

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

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?

manoj1

January 10, 2013

nice tutorial. thank you guys for posting it.

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