41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
(function() {
|
|
const container = document.getElementById('floating-particles');
|
|
if (!container) return;
|
|
|
|
const particleColors = ['cyan', 'pink', 'purple', 'green', 'orange'];
|
|
const particleCount = 25;
|
|
|
|
function createParticle() {
|
|
const particle = document.createElement('div');
|
|
|
|
const randomColor = particleColors[Math.floor(Math.random() * particleColors.length)];
|
|
particle.className = `floating-particle ${randomColor}`;
|
|
|
|
const leftPos = Math.random() * 100;
|
|
particle.style.left = leftPos + '%';
|
|
|
|
const drift = (Math.random() - 0.5) * 150;
|
|
particle.style.setProperty('--drift', drift + 'px');
|
|
|
|
const duration = 8 + Math.random() * 10;
|
|
particle.style.animationDuration = duration + 's';
|
|
|
|
const delay = Math.random() * 5;
|
|
particle.style.animationDelay = delay + 's';
|
|
|
|
const size = 6 + Math.random() * 8;
|
|
particle.style.width = size + 'px';
|
|
particle.style.height = size + 'px';
|
|
|
|
container.appendChild(particle);
|
|
|
|
setTimeout(() => {
|
|
particle.remove();
|
|
createParticle();
|
|
}, (duration + delay) * 1000);
|
|
}
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
setTimeout(() => createParticle(), i * 200);
|
|
}
|
|
})(); |