diff --git a/adventskalender/shared/js/glitter.js b/adventskalender/shared/js/glitter.js index 1dfff73..baf0cec 100644 --- a/adventskalender/shared/js/glitter.js +++ b/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, - 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 + x: cx, + y: cy, + r: Math.random() * 1.3 + 0.2, + alpha: Math.random() * 0.7 + 0.3, + vx: Math.cos(angle) * speed, + vy: Math.sin(angle) * speed, + 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.alpha -= 0.002; + p.y += p.vy + 0.05; // leichte Schwerkraft + 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); }