81 lines
2.2 KiB
JavaScript
81 lines
2.2 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();
|
|
|
|
// Even distribution + slight random offset
|
|
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
|
|
function animate() {
|
|
particles.forEach(p => p.move());
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate(); |