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 15:22:14 +00:00
parent b514db61c0
commit 11182626bf
1 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,15 @@
// Bratonien Glitter Hover Effekt – Explosion folgt dem Cursor // Bratonien Glitter Hover Effekt – für .door und .openfield
document.querySelectorAll(".door, .openfield").forEach(elem => { document.querySelectorAll(".door, .openfield").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;
// Canvas vorbereiten // Partner ermitteln (Tür ↔ offenes Feld) über data-day
const isDoor = elem.classList.contains("door");
const day = elem.dataset.day;
const partner = document.querySelector(
isDoor ? `.openfield[data-day="${day}"]` : `.door[data-day="${day}"]`
);
function setupCanvas() { function setupCanvas() {
if (canvas) return; if (canvas) return;
canvas = document.createElement("canvas"); canvas = document.createElement("canvas");
@@ -18,14 +24,13 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
} }
// Cursorposition innerhalb des Elements erfassen // 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);
cursorY = (e.clientY - rect.top) * 1.4 - (elem.offsetHeight * 0.2); cursorY = (e.clientY - rect.top) * 1.4 - (elem.offsetHeight * 0.2);
}); });
// Partikel hinzufügen (Explosion folgt Cursor)
function addParticles() { function addParticles() {
const cx = cursorX || canvas.width / 2; const cx = cursorX || canvas.width / 2;
const cy = cursorY || canvas.height / 2; const cy = cursorY || canvas.height / 2;
@@ -45,7 +50,6 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
} }
} }
// Zeichnen
function draw() { function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
if (hovering) addParticles(); if (hovering) addParticles();
@@ -53,14 +57,14 @@ document.querySelectorAll(".door, .openfield").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})`); // CI-Gold // Bratonien-Gold
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);
ctx.fill(); ctx.fill();
// Bewegung
p.x += p.vx; p.x += p.vx;
p.y += p.vy + 0.05; p.y += p.vy + 0.05;
p.vx *= 0.98; p.vx *= 0.98;
@@ -73,15 +77,21 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
anim = requestAnimationFrame(draw); anim = requestAnimationFrame(draw);
} }
// Hover starten // HOVER START
elem.addEventListener("mouseenter", () => { elem.addEventListener("mouseenter", () => {
setupCanvas(); setupCanvas();
hovering = true; hovering = true;
cancelAnimationFrame(anim); cancelAnimationFrame(anim);
draw(); draw();
// wichtigen Teil: bestehenden Hover-Style beim Partner auslösen
if (partner) {
// wir setzen KEINE neuen Styles, nur die Trigger-Klasse
partner.classList.add("hover-proxy");
}
}); });
// Hover beenden // HOVER ENDE
elem.addEventListener("mouseleave", () => { elem.addEventListener("mouseleave", () => {
hovering = false; hovering = false;
setTimeout(() => { setTimeout(() => {
@@ -91,5 +101,9 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
} }
}, 300); }, 300);
if (partner) {
partner.classList.remove("hover-proxy");
}
}); });
}); });