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.

  • http://www.brainhandles.com Greg Bulmash

    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.

  • http://www.webresourcesdepot.com Umut M.

    @Greg,

    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.

  • http://www.valuebound.in Valuebound

    This is really g8 jQuery plugin

  • Emily

    You can also animate background image by changing image background position using setInterval method, working example here: http://jquerydemo.com/demo/animate-background-image.aspx

Search