adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,4 +1,4 @@
-// Bratonien Glitter Hover Effekt – feiner, rieselnder Staub
+// Bratonien Glitter Hover Effekt – Partikel explodieren aus dem Zentrum
 document.querySelectorAll(".door").forEach(door => {
   let canvas, ctx, particles = [], anim, hovering = false;
 
@@ -17,22 +17,27 @@ document.querySelectorAll(".door").forEach(door => {
     ctx = canvas.getContext("2d");
   }
 
-  // Neue Partikel erzeugen (feiner, sanfter)
+  // Partikel hinzufügen (Explosion aus dem Zentrum)
   function addParticles() {
-    for (let i = 0; i < 3; i++) {
+    const cx = canvas.width / 2;
+    const cy = canvas.height / 2;
+    for (let i = 0; i < 4; i++) {
+      const angle = Math.random() * Math.PI * 2; // 360°
+      const speed = Math.random() * 1.5 + 0.3;   // Unterschiedliche Energie
       particles.push({
-        x: Math.random() * canvas.width,
+        x: cx,
-        y: -5, // startet oben, rieselt nach unten
+        y: cy,
-        r: Math.random() * 0.8 + 0.2,
+        r: Math.random() * 1.3 + 0.2,
-        alpha: Math.random() * 0.6 + 0.3,
+        alpha: Math.random() * 0.7 + 0.3,
-        vx: (Math.random() - 0.5) * 0.2, // leichtes Driften
+        vx: Math.cos(angle) * speed,
-        vy: Math.random() * 0.6 + 0.3,   // nach unten
+        vy: Math.sin(angle) * speed,
-        life: Math.random() * 200 + 80
+        life: Math.random() * 120 + 60,
+        decay: Math.random() * 0.015 + 0.008
       });
     }
   }
 
-  // Zeichnen und Bewegung
+  // Zeichnen
   function draw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -48,14 +53,16 @@ document.querySelectorAll(".door").forEach(door => {
       ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
       ctx.fill();
 
-      // Bewegung – feines Rieseln
+      // Bewegung – Explosion + leichte Gravitation
       p.x += p.vx;
-      p.y += p.vy;
+      p.y += p.vy + 0.05; // leichte Schwerkraft
-      p.alpha -= 0.002;
+      p.vx *= 0.98;       // Reibung
+      p.vy *= 0.98;
+      p.alpha -= p.decay;
       p.life--;
     });
 
-    particles = particles.filter(p => p.life > 0 && p.y < canvas.height && p.alpha > 0);
+    particles = particles.filter(p => p.life > 0 && p.alpha > 0);
     anim = requestAnimationFrame(draw);
   }