An animation based sparkling idea
Use the contents of the dist folder and add them to your project. Easy as Pi!
Select an HTMLElement or NodeList Element and sparkle() it.
document.querySelector("#element").sparkle();
document.querySelectorAll(".element").sparkle();- Sparkle with Custom Properties
- Basic HTMLElement sparkling
- Basic Nodelist Sparkling
- Sparkle with text contents
- Sparkle with self defined HTMLElement
There are various Setup Option to use for sparkling:
| Option | Description |
|---|---|
| position | string states where the overlay should be positioned. Possible Values: afterbegin, beforeend, beforebegin, afterend |
| count | floatdescribes how many stars should be added. |
| size | { width: string, height: string }sets width and height in css grammar |
| minAge | floatto declare the minimum lifetime of a star in ms |
| maxAge | floatto decloare the maximum lifetime of a star in ms |
| starsource | string, HTMLor HTMLElementto use as the source of the sparkling stars. |
The Default Setup runs as follows:
document.getElementById("default-setup").sparkle({
position: "beforeend",
count: 3,
size: {
width: "15px",
height: "15px",
},
minAge: 2000,
maxAge: 5000,
starsource: `
<svg
width="100%"
height="100%"
viewBox="0 0 15 15"
version="1.1"
xmlns="http://www.w3.org/2000/svg" x
mlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"
xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M1.125,4.95l4.462,0l1.913,-3.825l0.637,3.825l5.738,0l-4.463,3.188l0.638,5.737l-3.187,-3.825l-4.463,3.825l1.913,-5.737l-3.188,-3.188Z"
style="fill:#fff;">
</path>
</svg>`,
});You will need to webpack and webpack-cli for development. If you are familiar with those, there is no need to read on.
Try this:
npm ci
npx webpackDone! Well, that is, if all you wanna do is build.
I prefer using live-server running on my local machine. To do the magic, run:
npx webpack --watchYou can also use webpack-dev-server.
The test site will be available at http://127.0.0.1:8080/static/.