Sparkle up Your Website ✨

Recently, for one of my current projects, I was looking for a jQuery plug-in that adds a sparkle effect to DOM elements. However, I couldn’t find any that suited my needs. Either, the available plug-ins were way too elaborated for what I had in mind or the sparkle effect just didn’t exactly look like I had imagined. So, after an afternoon of researching existing jQuery plug-ins, I decided to simply code one myself, which I wanna share with you here.

You can add a sparkle effect—i.e., a single sparkling star—to any DOM element by doing the following with the given, optional parameters:

$("#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)
});

In case you want to add multiple sparkling stars to the DOM element, you can call the sparkle() function more than once, also with different parameters:

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

The sparkle effect can be removed using the following option:

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

Check out GitHub for downloading the necessary CSS and JS files of the plug-in: https://github.com/maxspeicher/jquery-sparkle. Also, see CodePen for the original implementation of the plug-in: http://codepen.io/maxspeicher/pen/zrVKLE