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 12:21:00 +00:00
parent 74f94a65dc
commit 2f526c30c9
1 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,12 @@
// Glitter Hover Effekt – nur beim Hovern aktiv // Bratonien Glitter Hover Effekt – feiner, rieselnder Staub
document.querySelectorAll(".door").forEach(door => { document.querySelectorAll(".door").forEach(door => {
let canvas, ctx, particles = [], anim; let canvas, ctx, particles = [], anim, hovering = false;
// Canvas vorbereiten // Canvas vorbereiten
function setupCanvas() { function setupCanvas() {
if (canvas) return; if (canvas) return;
canvas = document.createElement("canvas"); canvas = document.createElement("canvas");
canvas.width = door.offsetWidth * 1.4; // etwas größer für Randflug canvas.width = door.offsetWidth * 1.4;
canvas.height = door.offsetHeight * 1.4; canvas.height = door.offsetHeight * 1.4;
canvas.style.position = "absolute"; canvas.style.position = "absolute";
canvas.style.top = "-20%"; canvas.style.top = "-20%";
@@ -17,52 +17,65 @@ document.querySelectorAll(".door").forEach(door => {
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
} }
// Partikel erzeugen // Neue Partikel erzeugen (feiner, sanfter)
function createParticles() { function addParticles() {
particles = Array.from({ length: 60 }, () => ({ for (let i = 0; i < 3; i++) {
x: Math.random() * canvas.width, particles.push({
y: Math.random() * canvas.height, x: Math.random() * canvas.width,
r: Math.random() * 1.5 + 0.3, y: -5, // startet oben, rieselt nach unten
alpha: Math.random() * 0.8 + 0.2, r: Math.random() * 0.8 + 0.2,
vx: (Math.random() - 0.5) * 0.8, alpha: Math.random() * 0.6 + 0.3,
vy: (Math.random() - 0.7) * 1.2, vx: (Math.random() - 0.5) * 0.2, // leichtes Driften
life: Math.random() * 80 + 30 vy: Math.random() * 0.6 + 0.3, // nach unten
})); life: Math.random() * 200 + 80
});
}
} }
// Zeichnen // Zeichnen und Bewegung
function draw() { function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
if (hovering) addParticles();
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(255, 230, 120, ${p.alpha})`); grad.addColorStop(0, `rgba(255, 235, 160, ${p.alpha})`);
grad.addColorStop(0.3, `rgba(255, 220, 120, ${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 // Bewegung – feines Rieseln
p.x += p.vx; p.x += p.vx;
p.y += p.vy; p.y += p.vy;
p.alpha -= 0.015; p.alpha -= 0.002;
p.life--; p.life--;
}); });
particles = particles.filter(p => p.life > 0 && p.alpha > 0);
if (particles.length > 0) anim = requestAnimationFrame(draw); particles = particles.filter(p => p.life > 0 && p.y < canvas.height && p.alpha > 0);
anim = requestAnimationFrame(draw);
} }
// Hover Start // Hover starten
door.addEventListener("mouseenter", () => { door.addEventListener("mouseenter", () => {
setupCanvas(); setupCanvas();
createParticles(); hovering = true;
cancelAnimationFrame(anim); cancelAnimationFrame(anim);
draw(); draw();
}); });
// Hover Ende // Hover beenden
door.addEventListener("mouseleave", () => { door.addEventListener("mouseleave", () => {
cancelAnimationFrame(anim); hovering = false;
ctx.clearRect(0, 0, canvas.width, canvas.height); setTimeout(() => {
if (!hovering) {
cancelAnimationFrame(anim);
particles = [];
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}, 300);
}); });
}); });