43 lines
No EOL
2 KiB
JavaScript
43 lines
No EOL
2 KiB
JavaScript
console.log("Meine Seite läuft!");
|
|
|
|
const canvas = document.getElementById('bg');
|
|
const ctx = canvas.getContext('2d');
|
|
let W, H, particles = [];
|
|
function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; }
|
|
function createParticles() {
|
|
particles = [];
|
|
const count = Math.floor(W * H / 6500);
|
|
for (let i = 0; i < count; i++) {
|
|
particles.push({ x: Math.random()*W, y: Math.random()*H, r: Math.random()*1.8+0.4,
|
|
dx: (Math.random()-0.5)*0.3, dy: (Math.random()-0.5)*0.3, alpha: Math.random()*0.5+0.1 });
|
|
}
|
|
}
|
|
function drawBg() {
|
|
const g = ctx.createRadialGradient(W*0.3, H*0.4, 0, W*0.3, H*0.4, W*0.85);
|
|
g.addColorStop(0, '#0057c2'); g.addColorStop(0.5, '#001f44'); g.addColorStop(1, '#000d22');
|
|
ctx.fillStyle = g; ctx.fillRect(0,0,W,H);
|
|
const g2 = ctx.createRadialGradient(W*0.82, H*0.72, 0, W*0.82, H*0.72, W*0.5);
|
|
g2.addColorStop(0, 'rgba(0,55,150,0.45)'); g2.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = g2; ctx.fillRect(0,0,W,H);
|
|
}
|
|
function animate() {
|
|
ctx.clearRect(0,0,W,H); drawBg();
|
|
ctx.lineWidth = 1;
|
|
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 d = Math.sqrt(dx*dx+dy*dy);
|
|
if (d < 120) { ctx.globalAlpha = (1-d/120)*0.12; ctx.strokeStyle='#fff'; ctx.beginPath(); ctx.moveTo(particles[i].x,particles[i].y); ctx.lineTo(particles[j].x,particles[j].y); ctx.stroke(); }
|
|
}
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
particles.forEach(p => {
|
|
p.x+=p.dx; p.y+=p.dy;
|
|
if(p.x<0||p.x>W) p.dx*=-1; if(p.y<0||p.y>H) p.dy*=-1;
|
|
ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
|
|
ctx.fillStyle=`rgba(255,255,255,${p.alpha})`; ctx.fill();
|
|
});
|
|
requestAnimationFrame(animate);
|
|
}
|
|
window.addEventListener('resize', ()=>{ resize(); createParticles(); });
|
|
resize(); createParticles(); animate(); |