57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
// Particles Animation
|
|
const particlesContainer = document.getElementById('particles');
|
|
|
|
function createParticle() {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
|
|
particle.style.left = Math.random() * 100 + '%';
|
|
particle.style.top = Math.random() * 100 + '%';
|
|
|
|
const size = 3 + Math.random() * 4;
|
|
particle.style.width = size + 'px';
|
|
particle.style.height = size + 'px';
|
|
|
|
const duration = 3 + Math.random() * 5;
|
|
const delay = Math.random() * 2;
|
|
const moveX = (Math.random() - 0.5) * 200;
|
|
|
|
const animationName = `float-${Date.now()}-${Math.random()}`;
|
|
const keyframes = `
|
|
@keyframes ${animationName} {
|
|
0% {
|
|
transform: translateY(0) translateX(0);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-100vh) translateX(${moveX}px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const style = document.createElement('style');
|
|
style.innerHTML = keyframes;
|
|
document.head.appendChild(style);
|
|
|
|
particle.style.animation = `${animationName} ${duration}s ${delay}s ease-in-out forwards`;
|
|
|
|
particlesContainer.appendChild(particle);
|
|
|
|
setTimeout(() => {
|
|
particle.remove();
|
|
style.remove();
|
|
}, (duration + delay) * 1000);
|
|
}
|
|
|
|
setInterval(createParticle, 300);
|
|
|
|
for (let i = 0; i < 25; i++) {
|
|
setTimeout(createParticle, i * 100);
|
|
} |