66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
// Neon Particles Animation - Optimized for Academic Project
|
|
const particlesContainer = document.getElementById('particles');
|
|
const particleCount = 25; // Reduced for better performance
|
|
|
|
function createParticle() {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
|
|
// Random position
|
|
particle.style.left = Math.random() * 100 + '%';
|
|
particle.style.top = Math.random() * 100 + '%';
|
|
|
|
// Random animation duration
|
|
const duration = 20 + Math.random() * 20;
|
|
particle.style.animationDuration = duration + 's';
|
|
|
|
// Random delay
|
|
particle.style.animationDelay = Math.random() * 10 + 's';
|
|
|
|
// Random size variation (smaller)
|
|
const size = 3 + Math.random() * 3;
|
|
particle.style.width = size + 'px';
|
|
particle.style.height = size + 'px';
|
|
|
|
// Random colors (neon theme)
|
|
const colors = [
|
|
'radial-gradient(circle, #00ffff, #0099ff)',
|
|
'radial-gradient(circle, #ff00ff, #cc00ff)',
|
|
'radial-gradient(circle, #00ff99, #00cc77)'
|
|
];
|
|
particle.style.background = colors[Math.floor(Math.random() * colors.length)];
|
|
|
|
// Add floating animation
|
|
particle.style.animation = `floatParticle ${duration}s ease-in-out infinite`;
|
|
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
|
|
// Create particles
|
|
for (let i = 0; i < particleCount; i++) {
|
|
createParticle();
|
|
}
|
|
|
|
// Add CSS animation dynamically
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes floatParticle {
|
|
0%, 100% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.3;
|
|
}
|
|
25% {
|
|
transform: translate(15px, -25px) scale(1.1);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: translate(-10px, -50px) scale(0.9);
|
|
opacity: 0.4;
|
|
}
|
|
75% {
|
|
transform: translate(20px, -35px) scale(1.05);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style); |