sparklefall/dist/sparklefall.min.js

Beautiful, customizable falling sparkle animations for your website. Zero dependencies, easy to use.

/**
 * SparkleFall - Beautiful falling sparkle animations for your website
 * @version 1.0.0
 * @author Your Name
 * @license MIT
 */
class SparkleFall{constructor(t={}){this.config={container:document.body,interval:800,duration:5e3,sparkles:["✨","⭐","💫","🌟"],colors:null,minSize:10,maxSize:30,minDuration:2,maxDuration:5,wind:0,spin:!0,maxSparkles:50,autoStart:!0,zIndex:9999,injectStyles:!0,...t},this.sparkleContainer=null,this.intervalId=null,this.sparkleCount=0,this.isRunning=!1,this.init()}init(){"string"==typeof this.config.container&&(this.config.container=document.querySelector(this.config.container)),this.config.container?(this.createContainer(),this.config.injectStyles&&this.injectStyles(),this.config.autoStart&&this.start()):console.error("SparkleFall: Container element not found")}createContainer(){this.sparkleContainer=document.createElement("div"),this.sparkleContainer.className="sparklefall-container",this.sparkleContainer.style.zIndex=this.config.zIndex,this.config.container.appendChild(this.sparkleContainer)}injectStyles(){if(document.getElementById("sparklefall-styles"))return;const t=document.createElement("style");t.id="sparklefall-styles",t.textContent="\n      .sparklefall-container {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        overflow: hidden;\n      }\n      \n      .sparklefall-sparkle {\n        position: absolute;\n        pointer-events: none;\n        user-select: none;\n        will-change: transform, opacity;\n        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));\n      }\n      \n      @keyframes sparklefall-drop {\n        to {\n          transform: translateY(110vh) translateX(var(--wind-offset)) rotate(var(--rotation));\n          opacity: 0;\n        }\n      }\n      \n      @keyframes sparklefall-drop-no-spin {\n        to {\n          transform: translateY(110vh) translateX(var(--wind-offset));\n          opacity: 0;\n        }\n      }\n    ",document.head.appendChild(t)}createSparkle(){if(!this.sparkleContainer)return;if(this.sparkleCount>=this.config.maxSparkles)return;const t=document.createElement("div");t.className="sparklefall-sparkle";const n=this.config.sparkles[Math.floor(Math.random()*this.config.sparkles.length)];t.textContent=n,t.style.left=100*Math.random()+"%",t.style.top="-50px";const e=Math.random()*(this.config.maxSize-this.config.minSize)+this.config.minSize;if(t.style.fontSize=e+"px",this.config.colors&&this.config.colors.length>0){const n=this.config.colors[Math.floor(Math.random()*this.config.colors.length)];t.style.color=n}const i=Math.random()*(this.config.maxDuration-this.config.minDuration)+this.config.minDuration;t.style.animationDuration=i+"s";const s=this.config.spin?"sparklefall-drop":"sparklefall-drop-no-spin";t.style.animationName=s;const a=100*this.config.wind+"px",o=this.config.spin?720*Math.random()-360+"deg":"0deg";t.style.setProperty("--wind-offset",a),t.style.setProperty("--rotation",o),t.style.animationTimingFunction="linear",t.style.animationFillMode="forwards",this.sparkleContainer.appendChild(t),this.sparkleCount++,setTimeout(()=>{t.remove(),this.sparkleCount--},1e3*i)}start(){if(this.isRunning)return;this.isRunning=!0;const t=Math.min(5,this.config.maxSparkles);for(let n=0;n<t;n++)setTimeout(()=>this.createSparkle(),200*n);this.intervalId=setInterval(()=>{this.createSparkle()},this.config.interval)}stop(){this.isRunning&&(this.isRunning=!1,this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null))}clear(){if(this.stop(),this.sparkleContainer){this.sparkleContainer.querySelectorAll(".sparklefall-sparkle").forEach(t=>t.remove())}this.sparkleCount=0}destroy(){this.clear(),this.sparkleContainer&&(this.sparkleContainer.remove(),this.sparkleContainer=null)}updateConfig(t){this.config={...this.config,...t}}burst(t=10){const n=Math.min(t,this.config.maxSparkles-this.sparkleCount);for(let t=0;t<n;t++)setTimeout(()=>this.createSparkle(),50*t)}}"undefined"!=typeof module&&module.exports?module.exports=SparkleFall:"function"==typeof define&&define.amd?define(()=>SparkleFall):window.SparkleFall=SparkleFall;