From 61f858b8068b066763057997d3426685ae84724a Mon Sep 17 00:00:00 2001 From: MCHost Date: Sun, 6 Jul 2025 22:24:59 -0400 Subject: [PATCH] repair particles --- public/js/app.js | 107 ++++++++++++++++++++++++++--------------------- 1 file changed, 60 insertions(+), 47 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 3404cd4..8873453 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -73,53 +73,6 @@ document.addEventListener('DOMContentLoaded', () => { observer.observe(section); }); - const PARTICLE_POOL_SIZE = 50; - const particlePool = []; - const activeParticles = new Set(); - - function createParticleElement() { - const particle = document.createElement('div'); - particle.classList.add('particle'); - if (Math.random() > 0.6) particle.classList.add('large'); - return particle; - } - - function initializeParticlePool() { - for (let i = 0; i < PARTICLE_POOL_SIZE; i++) { - particlePool.push(createParticleElement()); - } - } - - function resetParticle(particle) { - particle.style.left = `${Math.random() * 100}%`; - particle.style.top = `${Math.random() * 100}%`; - particle.style.animationDelay = `${Math.random() * 8}s`; - particle.style.animationDuration = `${8 + Math.random() * 6}s`; - particle.classList.remove('fade-out'); - return particle; - } - - function spawnParticle() { - if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return; - - const particle = resetParticle(particlePool.pop()); - if (!particle.parentNode) document.body.appendChild(particle); - activeParticles.add(particle); - - setTimeout(() => { - particle.classList.add('fade-out'); - setTimeout(() => { - activeParticles.delete(particle); - particlePool.push(particle); - }, 500); - }, 14000); - } - - function animate() { - if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency - requestAnimationFrame(animate); - } - // Debounce function to prevent rapid clicks function debounce(fn, wait) { @@ -2484,5 +2437,65 @@ document.addEventListener('DOMContentLoaded', () => { window.addEventListener('resize', applyResponsiveStyles); + sections.forEach(section => { + section.style.transform = 'translateY(30px)'; + section.style.opacity = '0'; + section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out'; + observer.observe(section); +}); + + const PARTICLE_POOL_SIZE = 50; + const particlePool = []; + const activeParticles = new Set(); + + function createParticleElement() { + const particle = document.createElement('div'); + particle.classList.add('particle'); + if (Math.random() > 0.6) particle.classList.add('large'); + return particle; + } + + function initializeParticlePool() { + for (let i = 0; i < PARTICLE_POOL_SIZE; i++) { + particlePool.push(createParticleElement()); + } + } + + function resetParticle(particle) { + particle.style.left = `${Math.random() * 100}%`; + particle.style.top = `${Math.random() * 100}%`; + particle.style.animationDelay = `${Math.random() * 8}s`; + particle.style.animationDuration = `${8 + Math.random() * 6}s`; + particle.classList.remove('fade-out'); + return particle; + } + + function spawnParticle() { + if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return; + + const particle = resetParticle(particlePool.pop()); + if (!particle.parentNode) document.body.appendChild(particle); + activeParticles.add(particle); + + setTimeout(() => { + particle.classList.add('fade-out'); + setTimeout(() => { + activeParticles.delete(particle); + particlePool.push(particle); + }, 500); + }, 14000); + } + + function animate() { + if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency + requestAnimationFrame(animate); + } + + // Initialize and start +setTimeout(() => { + initializeParticlePool(); + animate(); +}, 500); + }); \ No newline at end of file