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:36:13 +00:00
parent 92c2bbea4f
commit e644648630
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
// Bratonien Glitter Hover Effekt – Partikel explodieren aus dem Zentrum // Bratonien Glitter Hover Effekt – Explosion folgt dem Cursor
document.querySelectorAll(".door").forEach(door => { document.querySelectorAll(".door").forEach(door => {
let canvas, ctx, particles = [], anim, hovering = false; let canvas, ctx, particles = [], anim, hovering = false;
let cursorX = 0, cursorY = 0;
// Canvas vorbereiten // Canvas vorbereiten
function setupCanvas() { function setupCanvas() {
@@ -17,13 +18,20 @@ document.querySelectorAll(".door").forEach(door => {
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
} }
// Partikel hinzufügen (Explosion aus dem Zentrum) // 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);
});
// Partikel hinzufügen (Explosion folgt Cursor)
function addParticles() { function addParticles() {
const cx = canvas.width / 2; const cx = cursorX || canvas.width / 2;
const cy = canvas.height / 2; const cy = cursorY || canvas.height / 2;
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
const angle = Math.random() * Math.PI * 2; // 360° const angle = Math.random() * Math.PI * 2;
const speed = Math.random() * 1.5 + 0.3; // Unterschiedliche Energie const speed = Math.random() * 1.5 + 0.3;
particles.push({ particles.push({
x: cx, x: cx,
y: cy, y: cy,
@@ -40,7 +48,6 @@ document.querySelectorAll(".door").forEach(door => {
// Zeichnen // 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();
particles.forEach(p => { particles.forEach(p => {
@@ -55,8 +62,8 @@ document.querySelectorAll(".door").forEach(door => {
// Bewegung – Explosion + leichte Gravitation // Bewegung – Explosion + leichte Gravitation
p.x += p.vx; p.x += p.vx;
p.y += p.vy + 0.05; // leichte Schwerkraft p.y += p.vy + 0.05;
p.vx *= 0.98; // Reibung p.vx *= 0.98;
p.vy *= 0.98; p.vy *= 0.98;
p.alpha -= p.decay; p.alpha -= p.decay;
p.life--; p.life--;