Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adventskalender/shared/js/glitter.js aktualisiert

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-04 21:56:44 +00:00
parent 7946ba106d
commit 2136e477cb
1 changed files with 106 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
adventskalender/shared/js/glitter.js
View File

@@ -1,38 +1,25 @@
// Bratonien Glitter Hover Effekt – für .door, .openfield und .fluegel // Bratonien Glitter Hover Effekt – strikt nach data-day gruppiert
document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => { document.addEventListener("DOMContentLoaded", () => {
// Alle relevanten Elemente einsammeln
const elems = document.querySelectorAll(".door, .openfield, .fluegel");
// nach Tag gruppieren
const groupsByDay = {};
elems.forEach(el => {
const day = el.dataset.day;
if (!groupsByDay[day]) {
groupsByDay[day] = [];
}
groupsByDay[day].push(el);
});
// für jede Tagesgruppe Hover + Glitzer setzen
Object.values(groupsByDay).forEach(group => {
group.forEach(elem => {
let canvas, ctx, particles = [], anim, hovering = false; let canvas, ctx, particles = [], anim, hovering = false;
let cursorX = 0, cursorY = 0; let cursorX = 0, cursorY = 0;
const day = elem.dataset.day;
let partners = [];
// === Beziehungstabelle ===
if (elem.classList.contains("door")) {
partners.push(document.querySelector(`.openfield[data-day="${day}"]`));
}
if (elem.classList.contains("openfield")) {
partners.push(document.querySelector(`.door[data-day="${day}"]`));
partners.push(document.querySelector(`.fluegel.left[data-day="${day}"]`));
partners.push(document.querySelector(`.fluegel.right[data-day="${day}"]`));
}
if (elem.classList.contains("fluegel")) {
const isLeft = elem.classList.contains("left");
const isRight = elem.classList.contains("right");
if (isLeft)
partners.push(document.querySelector(`.fluegel.right[data-day="${day}"]`));
if (isRight)
partners.push(document.querySelector(`.fluegel.left[data-day="${day}"]`));
// jeder Flügel verbindet sich zusätzlich mit dem openfield
partners.push(document.querySelector(`.openfield[data-day="${day}"]`));
}
partners = partners.filter(Boolean); // ungültige raus
// === Canvas für Glitzer ===
function setupCanvas() { function setupCanvas() {
if (canvas) return; if (canvas) return;
canvas = document.createElement("canvas"); canvas = document.createElement("canvas");
@@ -79,8 +66,8 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
particles.forEach(p => { particles.forEach(p => {
ctx.beginPath(); ctx.beginPath();
const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3); const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3);
grad.addColorStop(0, `rgba(200,170,73,${p.alpha})`); grad.addColorStop(0, `rgba(200, 170, 73, ${p.alpha})`);
grad.addColorStop(0.3, `rgba(255,240,200,${p.alpha * 0.8})`); grad.addColorStop(0.3, `rgba(255, 240, 200, ${p.alpha * 0.8})`);
grad.addColorStop(1, "transparent"); grad.addColorStop(1, "transparent");
ctx.fillStyle = grad; ctx.fillStyle = grad;
ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2); ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
@@ -98,27 +85,30 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
anim = requestAnimationFrame(draw); anim = requestAnimationFrame(draw);
} }
// === Hover Start === // HOVER START
elem.addEventListener("mouseenter", () => { elem.addEventListener("mouseenter", () => {
setupCanvas(); setupCanvas();
hovering = true; hovering = true;
cancelAnimationFrame(anim); cancelAnimationFrame(anim);
draw(); draw();
partners.forEach(p => p.classList.add("hover-proxy")); // WICHTIG: alle Elemente dieses Tages bekommen hover-proxy
group.forEach(p => p.classList.add("hover-proxy"));
}); });
// === Hover Ende === // HOVER ENDE
elem.addEventListener("mouseleave", () => { elem.addEventListener("mouseleave", () => {
hovering = false; hovering = false;
setTimeout(() => { setTimeout(() => {
if (!hovering) { if (!hovering) {
cancelAnimationFrame(anim); cancelAnimationFrame(anim);
particles = []; particles = [];
ctx.clearRect(0, 0, canvas.width, canvas.height); if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
} }
}, 300); }, 300);
partners.forEach(p => p.classList.remove("hover-proxy")); group.forEach(p => p.classList.remove("hover-proxy"));
});
});
}); });
}); });