animatePNG

A simple plugin to create an animation from a PNG file with frame-based sprites with jQuery.

For those times when you want to use a spinner or loading animation but need it to be alpha transparent. That’s just one example. The possibilities are endless.

Usage

$("#container").animatePNG(imageURL, width, height, frames, options);

Creates an animated div with a class of animation inside of the specified container.

Example

$(function(){
  $("#container").animatePNG("/images/animation.png", 100, 100, 8, {fps: 20, horizontal: false});
});

Parameters

imageURL string : URL path to the image to be animated
width integer : width in pixels of the image frame
height integer : height in pixels of the image frame
frames integer : number of frames in animation
options object : a hash of additional options

Options

fps integer : number of frames per second (approximately) to show. affects the speed of the animation.
horizontal boolean : true if your animation sprites go left to right, false if your animation sprites go top to bottom.