82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
// Particle system
|
|
const particlesContainer = document.getElementById('particles');
|
|
const particleCount = 150;
|
|
const particles = [];
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.element = document.createElement('div');
|
|
this.element.className = 'particle';
|
|
this.reset();
|
|
particlesContainer.appendChild(this.element);
|
|
}
|
|
|
|
reset() {
|
|
this.x = Math.random() * window.innerWidth;
|
|
this.y = Math.random() * window.innerHeight;
|
|
this.vx = (Math.random() - 0.5) * 1.2;
|
|
this.vy = (Math.random() - 0.5) * 1.2;
|
|
this.size = Math.random() * 3 + 2;
|
|
|
|
const colors = ['#00d9ff', '#ff00ff', '#00ffff', '#ff0080', '#9d00ff', '#00ff88'];
|
|
const color = colors[Math.floor(Math.random() * colors.length)];
|
|
this.element.style.background = color;
|
|
this.element.style.boxShadow = 0 0 15px ${color};
|
|
this.element.style.width = this.size + 'px';
|
|
this.element.style.height = this.size + 'px';
|
|
|
|
this.updatePosition();
|
|
}
|
|
|
|
updatePosition() {
|
|
this.element.style.left = this.x + 'px';
|
|
this.element.style.top = this.y + 'px';
|
|
}
|
|
|
|
move() {
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
|
|
if (this.x < -10) this.x = window.innerWidth + 10;
|
|
if (this.x > window.innerWidth + 10) this.x = -10;
|
|
if (this.y < -10) this.y = window.innerHeight + 10;
|
|
if (this.y > window.innerHeight + 10) this.y = -10;
|
|
|
|
this.updatePosition();
|
|
}
|
|
}
|
|
|
|
// Create particles with even distribution
|
|
const cols = 15;
|
|
const rows = 10;
|
|
let particleIndex = 0;
|
|
|
|
for (let i = 0; i < rows; i++) {
|
|
for (let j = 0; j < cols; j++) {
|
|
if (particleIndex >= particleCount) break;
|
|
|
|
const particle = new Particle();
|
|
// Distribute evenly across screen with some randomness
|
|
particle.x = (j / cols) * window.innerWidth + (Math.random() - 0.5) * 100;
|
|
particle.y = (i / rows) * window.innerHeight + (Math.random() - 0.5) * 100;
|
|
particle.updatePosition();
|
|
particles.push(particle);
|
|
particleIndex++;
|
|
}
|
|
if (particleIndex >= particleCount) break;
|
|
}
|
|
|
|
// Animate particles
|
|
function animate() {
|
|
particles.forEach(particle => particle.move());
|
|
requestAnimationFrame(animate);
|
|
}
|
|
animate();
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', () => {
|
|
particles.forEach(particle => {
|
|
if (particle.x > window.innerWidth) particle.x = window.innerWidth;
|
|
if (particle.y > window.innerHeight) particle.y = window.innerHeight;
|
|
});
|
|
}); |