sparklify.js

Fork me on GitHub

WTF is this!?

Missing the 90's? Craving some poorly-made sparkling animations? Hate yourself? sparklify.js is here to help!

sparklify.js creates 90's "glittery GIF" style animations from plain images. It uses HTML5 Canvas and jQuery to do so.

Damage your eyes!

Add sparkles to images on many websites with just the click of a button!

Drag this star-shaped "bookmarklet" into your bookmarks/favourites bar and click away to add some sparkle to your browsing experience!

Make your own websites hell!

Please do not use sparklify.js. It sucks. It really sucks.

It's more a proof-of-concept/pointless project than something of actual use.

If you must use it, download the script and embed it into your page after you've included jQuery. sparklify.js is a jQuery plugin and thus requires it.

To replace an image with its equivalent glitter-canvas, do something like the following.

$(".sparkle").sparklify();
You can also specify options.
$(".sparkle").sparklify({
    intensity: 1, //How many sparkles to generate (relative)
    speed: 10, //Number of sparkles per second.
    color: "white", //Colour of the sparkles
    size: 10, //Size of the sparkles in pixels
    symbols: ["+", "*","★","●", "."], //The symbols to use as sparkles,
    glow: 0 //How many pixels of 'glow' to add to the sparkles - this slows down the process a lot!
);

Demo

No sparkles for you!
Try it out for yourself