diff --git a/adventskalender/shared/js/glitter.js b/adventskalender/shared/js/glitter.js index e14589e..c20ff0d 100644 --- a/adventskalender/shared/js/glitter.js +++ b/adventskalender/shared/js/glitter.js @@ -1,21 +1,17 @@ -// Bratonien Glitter Hover Effekt – strikt nach data-day gruppiert +// Bratonien Glitter Hover Effekt – finale, symmetrische Version document.addEventListener("DOMContentLoaded", () => { + const allElements = document.querySelectorAll(".door, .fluegel, .openfield"); - // Alle relevanten Elemente einsammeln - const elems = document.querySelectorAll(".door, .openfield, .fluegel"); - - // nach Tag gruppieren - const groupsByDay = {}; - elems.forEach(el => { + // === Alle Elemente nach data-day gruppieren === + const groups = {}; + allElements.forEach(el => { const day = el.dataset.day; - if (!groupsByDay[day]) { - groupsByDay[day] = []; - } - groupsByDay[day].push(el); + if (!groups[day]) groups[day] = []; + groups[day].push(el); }); - // für jede Tagesgruppe Hover + Glitzer setzen - Object.values(groupsByDay).forEach(group => { + // === Für jede Gruppe Hover-Effekt einrichten === + Object.values(groups).forEach(group => { group.forEach(elem => { let canvas, ctx, particles = [], anim, hovering = false; let cursorX = 0, cursorY = 0; @@ -85,18 +81,19 @@ document.addEventListener("DOMContentLoaded", () => { anim = requestAnimationFrame(draw); } - // HOVER START + // === Hover Start === elem.addEventListener("mouseenter", () => { setupCanvas(); hovering = true; cancelAnimationFrame(anim); draw(); - // WICHTIG: alle Elemente dieses Tages bekommen hover-proxy - group.forEach(p => p.classList.add("hover-proxy")); + // Alle Elemente mit gleichem Tag (door, flügel, openfield) + // bekommen gleichzeitig hover-proxy + group.forEach(e => e.classList.add("hover-proxy")); }); - // HOVER ENDE + // === Hover Ende === elem.addEventListener("mouseleave", () => { hovering = false; setTimeout(() => { @@ -107,7 +104,7 @@ document.addEventListener("DOMContentLoaded", () => { } }, 300); - group.forEach(p => p.classList.remove("hover-proxy")); + group.forEach(e => e.classList.remove("hover-proxy")); }); }); });