PHP Particle Background Animation System
Create a configurable particle animation system with PHP-controlled parameters for speed, color, density, and connections.
Overview
Build a stunning particle animation background system. PHP generates the configuration (colors, particle count, speed, connection distance), and JavaScript renders it on Canvas.
index.php
<?php
$config = [
'particleCount' => 120, 'speed' => 1.5, 'maxDistance' => 150,
'particleSize' => 2, 'colors' => ['#6c63ff', '#48dbfb', '#ff6b6b', '#00ff88'],
'lineOpacity' => 0.15, 'background' => '#0a0a23',
];
$jsonConfig = json_encode($config);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Particle Animation</title>
<style>
* { margin: 0; padding: 0; }
body { overflow: hidden; background: <?= $config['background'] ?>; }
canvas { display: block; }
.overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; font-family: sans-serif; z-index: 1; }
.overlay h1 { font-size: 3.5rem; margin-bottom: 0.5rem; }
.overlay p { font-size: 1.2rem; opacity: 0.7; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="overlay"><h1>✨ Particles</h1><p>PHP-Configured Canvas Animation</p></div>
<script>
const cfg = <?= $jsonConfig ?>;
const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d');
let W, H, particles = [];
function resize() { W = canvas.width = innerWidth; H = canvas.height = innerHeight; }
resize(); window.addEventListener('resize', resize);
class Particle {
constructor() { this.reset(); }
reset() {
this.x = Math.random() * W; this.y = Math.random() * H;
this.vx = (Math.random() - 0.5) * cfg.speed; this.vy = (Math.random() - 0.5) * cfg.speed;
this.color = cfg.colors[Math.floor(Math.random() * cfg.colors.length)];
this.size = Math.random() * cfg.particleSize + 1;
}
update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > W) this.vx *= -1; if (this.y < 0 || this.y > H) this.vy *= -1; }
draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); }
}
for (let i = 0; i < cfg.particleCount; i++) particles.push(new Particle());
function animate() {
ctx.clearRect(0, 0, W, H);
particles.forEach(p => { p.update(); p.draw(); });
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x, dy = particles[i].y - particles[j].y;
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist < cfg.maxDistance) {
ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = 'rgba(108,99,255,' + (cfg.lineOpacity * (1 - dist/cfg.maxDistance)) + ')'; ctx.stroke();
}
}
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>Technologies
- PHP — configuration engine (particle count, speed, colors) - HTML5 Canvas — particle rendering - JavaScript — animation loop, collision detection
Related Projects
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
Comments (0)
No comments yet. Be the first to comment!