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 19:12:49 +00:00
parent d94ef980d8
commit 4fb90b0c81
1 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,24 @@
// Bratonien Glitter Hover Effekt – für .door und .openfield // Bratonien Glitter Hover Effekt – für .door, .openfield und .fluegel
document.querySelectorAll(".door, .openfield").forEach(elem => { document.querySelectorAll(".door, .openfield, .fluegel").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; const day = elem.dataset.day;
let partner = null; let partner = null;
if (elem.classList.contains("door")) { if (elem.classList.contains("door")) {
partner = document.querySelector(`.openfield[data-day="${day}"]`); partner = document.querySelector(`.openfield[data-day="${day}"]`);
} else if (elem.classList.contains("openfield")) { } else if (elem.classList.contains("openfield")) {
partner = document.querySelector(`.door[data-day="${day}"]`); partner = document.querySelector(`.door[data-day="${day}"]`);
} else if (elem.classList.contains("fluegel")) { } else if (elem.classList.contains("fluegel")) {
const isLeft = elem.classList.contains("left"); const isLeft = elem.classList.contains("left");
const isRight = elem.classList.contains("right"); const isRight = elem.classList.contains("right");
// Finde den gegenüberliegenden Flügel
if (isLeft) { if (isLeft) {
partner = document.querySelector(`.fluegel.right[data-day="${day}"]`); partner = document.querySelector(`.fluegel.right[data-day="${day}"]`);
} else if (isRight) { } else if (isRight) {
partner = document.querySelector(`.fluegel.left[data-day="${day}"]`); partner = document.querySelector(`.fluegel.left[data-day="${day}"]`);
} }
} }
function setupCanvas() { function setupCanvas() {
if (canvas) return; if (canvas) return;
@@ -35,7 +34,6 @@ if (elem.classList.contains("door")) {
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
} }
// Cursor in Element
elem.addEventListener("mousemove", e => { elem.addEventListener("mousemove", e => {
const rect = elem.getBoundingClientRect(); const rect = elem.getBoundingClientRect();
cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2); cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2);
@@ -68,7 +66,6 @@ if (elem.classList.contains("door")) {
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);
// Bratonien-Gold
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");
@@ -95,9 +92,7 @@ if (elem.classList.contains("door")) {
cancelAnimationFrame(anim); cancelAnimationFrame(anim);
draw(); draw();
// wichtigen Teil: bestehenden Hover-Style beim Partner auslösen
if (partner) { if (partner) {
// wir setzen KEINE neuen Styles, nur die Trigger-Klasse
partner.classList.add("hover-proxy"); partner.classList.add("hover-proxy");
} }
}); });