Background Image Animation With jQuery: jAni

Animated GIFs can have up to 256 colors & they are not interactive.

jAni is a lightweight jQuery plugin for animating background images which can be an alternative to animated GIFs (in some cases).

It simply changes the position of a long background image in given distances & speed.

jQuery Background Animation Plugin

The plugin has few options for controlling it:

  • start, stop, pause
  • speed
  • loop on/off
  • dimensions of the frames

As it will require JavaScript to be enabled, using jAni combined with other JavaScript events (like animating a better-quality Ajax loader) would be very functional.

  1. Reply Greg Bulmash January 12, 2010 at 8:18 PM

    The question is, though, what advantage does this give over an animated .gif aside from a larger color palette. You can control .gif speed. Photoshop and other gif animators allow you to specify how long each frame stays on screen.

    Considering that you’re probably creating a larger file, plus you have the weight of the plugin, unless you really need a larger color pallette, I’m not seeing that this is anything more than a neat trick.

  2. Reply Umut M. January 13, 2010 at 12:31 AM


    I think the biggest advantyage is the ability to control it
    – you can start/stop/pause it when a user clicks a button, etc.

    But, I agree with you that it is not a complete replacement as it hass some fallbacks like JS-dependancy & possibly: size.

  3. Reply Valuebound February 14, 2010 at 8:22 AM

    This is really g8 jQuery plugin

  4. Reply Emily February 20, 2013 at 5:42 PM

    You can also animate background image by changing image background position using setInterval method, working example here:

Leave a reply