adventskalender/shared/js/glitter.js hinzugefügt

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);
+  });
+});