Custom Sparkle Animations With jQuery And SVG - Sparkle

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

See also:

• jQuery Plugin To Create Sparkling Stars Animations - Canvas Sparkles

How to use it:

1. Load the stylehsheet sparkle.css in the header that will provide the rotate animations for the sparkle effect using CSS3.

<link href="sparkle.css" rel="stylesheet">

2. Load jQuery library and the jQuery Sparkle plugin's script at the end of the html document.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="sparkle.jquery.js"></script>

3. Just call the function on the desired element and we're done.

$('h1').sparkle();

4. Config the sparkle effect.

$('h1').sparkle({

  // fill color
  fill: "#fff",

  // stroke color
  stroke: "#000",

  // size in pixels
  size: 20,

  // delay before first sparkle
  delay: 0,

  // animation duration
  duration: 1500,

  // delay between two sparkles
  pause: 1000
  
});

5. Apply multiple sparkle effects to the element.

$('h1').sparkle({ size: 20 }).sparkle({
  delay: 1000,
  pause: 750,
  size: 10
});

---

This awesome jQuery plugin is developed by maxspeicher. For more Advanced Usages, please check the demo page or visit the official website.