diff --git a/adventskalender/shared/js/glitter.js b/adventskalender/shared/js/glitter.js new file mode 100644 index 0000000..95d410b --- /dev/null +++ b/adventskalender/shared/js/glitter.js @@ -0,0 +1,68 @@ +// Glitter Hover Effekt – nur beim Hovern aktiv +document.querySelectorAll(".door").forEach(door => { + let canvas, ctx, particles = [], anim; + + // Canvas vorbereiten + function setupCanvas() { + if (canvas) return; + canvas = document.createElement("canvas"); + canvas.width = door.offsetWidth * 1.4; // etwas größer für Randflug + canvas.height = door.offsetHeight * 1.4; + canvas.style.position = "absolute"; + canvas.style.top = "-20%"; + canvas.style.left = "-20%"; + canvas.style.pointerEvents = "none"; + canvas.style.zIndex = "10"; + door.appendChild(canvas); + ctx = canvas.getContext("2d"); + } + + // Partikel erzeugen + function createParticles() { + particles = Array.from({ length: 60 }, () => ({ + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + r: Math.random() * 1.5 + 0.3, + alpha: Math.random() * 0.8 + 0.2, + vx: (Math.random() - 0.5) * 0.8, + vy: (Math.random() - 0.7) * 1.2, + life: Math.random() * 80 + 30 + })); + } + + // Zeichnen + function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + particles.forEach(p => { + ctx.beginPath(); + const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3); + grad.addColorStop(0, `rgba(255, 230, 120, ${p.alpha})`); + grad.addColorStop(1, "transparent"); + ctx.fillStyle = grad; + ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2); + ctx.fill(); + + // Bewegung + p.x += p.vx; + p.y += p.vy; + p.alpha -= 0.015; + p.life--; + }); + particles = particles.filter(p => p.life > 0 && p.alpha > 0); + if (particles.length > 0) anim = requestAnimationFrame(draw); + } + + // Hover Start + door.addEventListener("mouseenter", () => { + setupCanvas(); + createParticles(); + cancelAnimationFrame(anim); + draw(); + }); + + // Hover Ende + door.addEventListener("mouseleave", () => { + cancelAnimationFrame(anim); + ctx.clearRect(0, 0, canvas.width, canvas.height); + }); +}); \ No newline at end of file