Author: | efkah |
---|---|
Views Total: | 9,391 views |
Official Page: | Go to website |
Last Update: | October 13, 2019 |
License: | MIT |
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" } });
is there a possibility to STOP sparkling?