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:05:08 +00:00
parent c169534bb9
commit 83833958b7
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
// Bratonien Glitter Hover Effekt – Explosion folgt dem Cursor
document.querySelectorAll(".door").forEach(door => {
document.querySelectorAll(".door, .openfield").forEach(elem => {
let canvas, ctx, particles = [], anim, hovering = false;
let cursorX = 0, cursorY = 0;
@@ -7,22 +7,22 @@ document.querySelectorAll(".door").forEach(door => {
function setupCanvas() {
if (canvas) return;
canvas = document.createElement("canvas");
canvas.width = door.offsetWidth * 1.4;
canvas.height = door.offsetHeight * 1.4;
canvas.width = elem.offsetWidth * 1.4;
canvas.height = elem.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);
elem.appendChild(canvas);
ctx = canvas.getContext("2d");
}
// Cursorposition innerhalb des Türchens erfassen
door.addEventListener("mousemove", e => {
const rect = door.getBoundingClientRect();
cursorX = (e.clientX - rect.left) * 1.4 - (door.offsetWidth * 0.2);
cursorY = (e.clientY - rect.top) * 1.4 - (door.offsetHeight * 0.2);
// Cursorposition innerhalb des Elements erfassen
elem.addEventListener("mousemove", e => {
const rect = elem.getBoundingClientRect();
cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2);
cursorY = (e.clientY - rect.top) * 1.4 - (elem.offsetHeight * 0.2);
});
// Partikel hinzufügen (Explosion folgt Cursor)
@@ -53,14 +53,14 @@ document.querySelectorAll(".door").forEach(door => {
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, 235, 160, ${p.alpha})`);
grad.addColorStop(0.3, `rgba(255, 220, 120, ${p.alpha * 0.8})`);
grad.addColorStop(0, `rgba(200, 170, 73, ${p.alpha})`); // CI-Gold
grad.addColorStop(0.3, `rgba(255, 240, 200, ${p.alpha * 0.8})`);
grad.addColorStop(1, "transparent");
ctx.fillStyle = grad;
ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
ctx.fill();
// Bewegung – Explosion + leichte Gravitation
// Bewegung
p.x += p.vx;
p.y += p.vy + 0.05;
p.vx *= 0.98;
@@ -74,7 +74,7 @@ document.querySelectorAll(".door").forEach(door => {
}
// Hover starten
door.addEventListener("mouseenter", () => {
elem.addEventListener("mouseenter", () => {
setupCanvas();
hovering = true;
cancelAnimationFrame(anim);
@@ -82,7 +82,7 @@ document.querySelectorAll(".door").forEach(door => {
});
// Hover beenden
door.addEventListener("mouseleave", () => {
elem.addEventListener("mouseleave", () => {
hovering = false;
setTimeout(() => {
if (!hovering) {