jBlitter: Rich animated HTML5 canvas buttons with jQuery

jBlitter is a jQuery plugin that allows you to create animated buttons for your web applications. Mouse over the example button below for an idea of what's possible with jBlitter. IE7 and 8 users, your browser does not support HTML5 canvas and you won't see the animation.

Download jBlitter

How jBlitter works

The plugin uses blitting, a technique that uses image sprites to create animations, and is the foundation of animation in most games during the 2d game era. Image sprites can be thought of as short film strips that are played at the right moment, such as when a character in a video game throws a punch, or something explodes.

Here is Ryu's dragon punch sprite from the game "Street Figher Alpha" (1995). When the player enters in the correct joystick and button combination, the game's engine plays the proper sprite animation.

example of a sprite

jBlitter uses a similar technique with an image sprite (such as a .png, .jpg or .gif), the HTML5 canvas element, and Javascript to create sprite animations.

Click here to see the image sprite used in the above button example.

How to use the plugin

Tips:

blog comments powered by Disqus