adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,12 +1,12 @@
-// Glitter Hover Effekt – nur beim Hovern aktiv
+// Bratonien Glitter Hover Effekt – feiner, rieselnder Staub
 document.querySelectorAll(".door").forEach(door => {
-  let canvas, ctx, particles = [], anim;
+  let canvas, ctx, particles = [], anim, hovering = false;
 
   // Canvas vorbereiten
   function setupCanvas() {
     if (canvas) return;
     canvas = document.createElement("canvas");
-    canvas.width = door.offsetWidth * 1.4; // etwas größer für Randflug
+    canvas.width = door.offsetWidth * 1.4;
     canvas.height = door.offsetHeight * 1.4;
     canvas.style.position = "absolute";
     canvas.style.top = "-20%";
@@ -17,52 +17,65 @@ document.querySelectorAll(".door").forEach(door => {
     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
-    }));
+  // Neue Partikel erzeugen (feiner, sanfter)
+  function addParticles() {
+    for (let i = 0; i < 3; i++) {
+      particles.push({
+        x: Math.random() * canvas.width,
+        y: -5, // startet oben, rieselt nach unten
+        r: Math.random() * 0.8 + 0.2,
+        alpha: Math.random() * 0.6 + 0.3,
+        vx: (Math.random() - 0.5) * 0.2, // leichtes Driften
+        vy: Math.random() * 0.6 + 0.3,   // nach unten
+        life: Math.random() * 200 + 80
+      });
+    }
   }
 
-  // Zeichnen
+  // Zeichnen und Bewegung
   function draw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (hovering) addParticles();
+
     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(0, `rgba(255, 235, 160, ${p.alpha})`);
+      grad.addColorStop(0.3, `rgba(255, 220, 120, ${p.alpha * 0.8})`);
       grad.addColorStop(1, "transparent");
       ctx.fillStyle = grad;
       ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
       ctx.fill();
 
-      // Bewegung
+      // Bewegung – feines Rieseln
       p.x += p.vx;
       p.y += p.vy;
-      p.alpha -= 0.015;
+      p.alpha -= 0.002;
       p.life--;
     });
-    particles = particles.filter(p => p.life > 0 && p.alpha > 0);
-    if (particles.length > 0) anim = requestAnimationFrame(draw);
+
+    particles = particles.filter(p => p.life > 0 && p.y < canvas.height && p.alpha > 0);
+    anim = requestAnimationFrame(draw);
   }
 
-  // Hover Start
+  // Hover starten
   door.addEventListener("mouseenter", () => {
     setupCanvas();
-    createParticles();
+    hovering = true;
     cancelAnimationFrame(anim);
     draw();
   });
 
-  // Hover Ende
+  // Hover beenden
   door.addEventListener("mouseleave", () => {
-    cancelAnimationFrame(anim);
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    hovering = false;
+    setTimeout(() => {
+      if (!hovering) {
+        cancelAnimationFrame(anim);
+        particles = [];
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    }, 300);
   });
 });