68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
// Glitter Hover Effekt – nur beim Hovern aktiv
|
||
document.querySelectorAll(".door").forEach(door => {
|
||
let canvas, ctx, particles = [], anim;
|
||
|
||
// Canvas vorbereiten
|
||
function setupCanvas() {
|
||
if (canvas) return;
|
||
canvas = document.createElement("canvas");
|
||
canvas.width = door.offsetWidth * 1.4; // etwas größer für Randflug
|
||
canvas.height = door.offsetHeight * 1.4;
|
||
canvas.style.position = "absolute";
|
||
canvas.style.top = "-20%";
|
||
canvas.style.left = "-20%";
|
||
canvas.style.pointerEvents = "none";
|
||
canvas.style.zIndex = "10";
|
||
door.appendChild(canvas);
|
||
ctx = canvas.getContext("2d");
|
||
}
|
||
|
||
// Partikel erzeugen
|
||
function createParticles() {
|
||
particles = Array.from({ length: 60 }, () => ({
|
||
x: Math.random() * canvas.width,
|
||
y: Math.random() * canvas.height,
|
||
r: Math.random() * 1.5 + 0.3,
|
||
alpha: Math.random() * 0.8 + 0.2,
|
||
vx: (Math.random() - 0.5) * 0.8,
|
||
vy: (Math.random() - 0.7) * 1.2,
|
||
life: Math.random() * 80 + 30
|
||
}));
|
||
}
|
||
|
||
// Zeichnen
|
||
function draw() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
particles.forEach(p => {
|
||
ctx.beginPath();
|
||
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(1, "transparent");
|
||
ctx.fillStyle = grad;
|
||
ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Bewegung
|
||
p.x += p.vx;
|
||
p.y += p.vy;
|
||
p.alpha -= 0.015;
|
||
p.life--;
|
||
});
|
||
particles = particles.filter(p => p.life > 0 && p.alpha > 0);
|
||
if (particles.length > 0) anim = requestAnimationFrame(draw);
|
||
}
|
||
|
||
// Hover Start
|
||
door.addEventListener("mouseenter", () => {
|
||
setupCanvas();
|
||
createParticles();
|
||
cancelAnimationFrame(anim);
|
||
draw();
|
||
});
|
||
|
||
// Hover Ende
|
||
door.addEventListener("mouseleave", () => {
|
||
cancelAnimationFrame(anim);
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
});
|
||
}); |