48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
// Floating Particles System - Particles rising from bottom
|
|
(function() {
|
|
const container = document.getElementById('floating-particles');
|
|
if (!container) return;
|
|
|
|
const particleColors = ['cyan', 'pink', 'purple', 'green', 'orange'];
|
|
const particleCount = 25; // Number of particles
|
|
|
|
function createParticle() {
|
|
const particle = document.createElement('div');
|
|
particle.className = `floating-particle ${particleColors[Math.floor(Math.random() * particleColors.length)]}`;
|
|
|
|
// Random horizontal position
|
|
const leftPos = Math.random() * 100;
|
|
particle.style.left = leftPos + '%';
|
|
|
|
// Random drift amount (horizontal movement during float)
|
|
const drift = (Math.random() - 0.5) * 150; // -75px to +75px
|
|
particle.style.setProperty('--drift', drift + 'px');
|
|
|
|
// Random animation duration (slower = more dramatic)
|
|
const duration = 8 + Math.random() * 10; // 8-18 seconds
|
|
particle.style.animationDuration = duration + 's';
|
|
|
|
// Random delay for staggered effect
|
|
const delay = Math.random() * 5;
|
|
particle.style.animationDelay = delay + 's';
|
|
|
|
// Random size variation
|
|
const size = 6 + Math.random() * 8; // 6-14px
|
|
particle.style.width = size + 'px';
|
|
particle.style.height = size + 'px';
|
|
|
|
container.appendChild(particle);
|
|
|
|
// Remove and recreate after animation completes
|
|
setTimeout(() => {
|
|
particle.remove();
|
|
createParticle();
|
|
}, (duration + delay) * 1000);
|
|
}
|
|
|
|
// Initialize particles
|
|
for (let i = 0; i < particleCount; i++) {
|
|
// Stagger initial creation
|
|
setTimeout(() => createParticle(), i * 200);
|
|
}
|
|
})(); |