61 lines
1.7 KiB
HTML
61 lines
1.7 KiB
HTML
<canvas id="canvas" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;"></canvas>
|
|
<script>
|
|
var canvas = document.getElementById('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
var particles = [];
|
|
for (var i = 0; i < 80; i++) {
|
|
particles.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
r: Math.random() * 3 + 1,
|
|
vx: (Math.random() - 0.5) * 0.5,
|
|
vy: -(Math.random() * 0.8 + 0.2),
|
|
alpha: Math.random() * 0.5 + 0.2,
|
|
hue: Math.random() * 60 + 200
|
|
});
|
|
}
|
|
|
|
var FPS = 15, lastFrame = 0;
|
|
|
|
function render(ts) {
|
|
requestAnimationFrame(render);
|
|
if (ts - lastFrame < 1000 / FPS) return;
|
|
lastFrame = ts;
|
|
|
|
var w = canvas.width, h = canvas.height;
|
|
ctx.fillStyle = 'rgba(5, 5, 15, 0.15)';
|
|
ctx.fillRect(0, 0, w, h);
|
|
|
|
for (var i = 0; i < particles.length; i++) {
|
|
var p = particles[i];
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
if (p.y < -20) { p.y = h + 20; p.x = Math.random() * w; }
|
|
if (p.x < -20) p.x = w + 20;
|
|
if (p.x > w + 20) p.x = -20;
|
|
|
|
var grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 4);
|
|
grad.addColorStop(0, 'hsla(' + p.hue + ', 70%, 70%, ' + p.alpha + ')');
|
|
grad.addColorStop(1, 'hsla(' + p.hue + ', 70%, 70%, 0)');
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.r * 4, 0, Math.PI * 2);
|
|
ctx.fillStyle = grad;
|
|
ctx.fill();
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
|
ctx.fillStyle = 'hsla(' + p.hue + ', 80%, 80%, ' + (p.alpha + 0.3) + ')';
|
|
ctx.fill();
|
|
}
|
|
}
|
|
requestAnimationFrame(render);
|
|
</script>
|