🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Sparkle is a very small jQuery plugin that applies a customizable, SVG based sparkle animation effect to any element.

SVG sparkle

Documentation

jquery-sparkle

A jQuery plug-in that lets you add a sparkle effect to any element.

$("#main").sparkle({   fill: "#fff", // fill color of the star that makes up the sparkle effect (default: #fff)   stroke: "#000", // outline color of the star (default: #000)   size: 20, // size of the sparkle effect in px (default: 20)   delay: 0, // delay before first sparkle in ms (default: 0)   duration: 1500, // duration of a sparkle in ms (default: 1500)   pause: 1000 // delay between two sparkles in ms (default: 1000) });

You can also add multiple sparkles (with different properties) to the same element:

$("#main").sparkle({   size: 30 }).sparkle({   size: 30 }).sparkle({   size: 10,   delay: 1000,   pause: 750 });

Shorthand notation for the above:

$("#main").sparkle([   '#fff #000 30',   '#fff #000 30',   '#fff #000 10 1000 1500 750' ]);

The sparkle effect can be removed using the following option:

$("#main").sparkle("destroy");

See CodePen for the original implementation of the plug-in: http://codepen.io/maxspeicher/pen/zrVKLE


You May Also Like