Add Magical Star Sparkle Effect To Any Element – sparkle.js

Preview:

Description:

sparkle.js is a pure JavaScript library that adds configurable magical ‘Star Sparkle’ effect to any elements.

How to use it:

1. Load the minified version of the sparkle.js library in the document.

<script src="./dist/sparkle.min.js"></script>

2. Apply the ‘Star Sparkle’ effect to an element.

document.getElementById("sparkle").sparkle({
  // options here
});

3. Customize the star image.

document.getElementById("sparkle").sparkle({
  starsource: document.querySelector(".icon"),
});

document.getElementById("sparkle").sparkle({
  starsource: '<svg ...></svg>'
});

4. Specify the min/max lifetime of stars.

document.getElementById("sparkle").sparkle({
  minAge: 500,
  maxAge: 2000
});

5. Specify the number of stars to generate.

document.getElementById("sparkle").sparkle({
  count: 10
});

6. Customize the position of the overlay.

document.getElementById("sparkle").sparkle({
  
  // afterbegin, beforeend, beforebegin, afterend
  position: "afterbegin"
  
});

7. Set the size (height/width) of the ‘Star Sparkle’ effect.

document.getElementById("sparkle").sparkle({
  size: 10
});

// or
document.getElementById("sparkle").sparkle({
  size: {
    width: "15px",
    height: "15px"
  }
});