nico/byhaider-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(background): star generation outside of view (scroll height)

Browse Source
This commit is contained in:
nico.hdr8
2025-10-07 13:13:58 +02:00
parent 5138bd3b58
commit 0d65cdbc65
1 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/core/components/background/background.ts
View File

@@ -16,7 +16,7 @@ export class Background {
@ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
// Config
private numStars = 300;
private numStars = 400;
private minBlink = 0.2;
private maxBlink = 1;
private blinkSpeed = 0.002; // Stern blinkt langsamer oder schneller
@@ -33,26 +33,36 @@ export class Background {
private height = window.innerHeight;
private animationId!: number;
private scrollY = window.scrollY;
private bodyHeight = document.body.scrollHeight;
ngOnInit() {
const canvas = this.canvasRef.nativeElement;
this.ctx = canvas.getContext('2d')!;
canvas.width = this.width;
canvas.height = this.height;
ngAfterViewInit() {
requestAnimationFrame(() => {
const canvas = this.canvasRef.nativeElement;
this.ctx = canvas.getContext('2d')!;
for (let i = 0; i < (this.numStars) * (document.body.scrollHeight / this.height); i++) {
this.stars.push({
x: Math.random() * this.width,
y: Math.random() * document.body.scrollHeight,
radius: Math.random() * 1.5 + 0.5,
alpha: this.minBlink + Math.random() * (this.maxBlink - this.minBlink),
alphaChange: (Math.random() * this.blinkSpeed) + 0.0005,
vx: (Math.random() - 0.5) * this.maxSpeed,
vy: (Math.random() - 0.5) * this.maxSpeed
});
}
this.width = window.innerWidth;
this.height = window.innerHeight;
canvas.width = this.width;
canvas.height = this.height;
this.animate();
this.bodyHeight = document.body.scrollHeight + 110; // navbar height
console.log(this.bodyHeight)
for (let i = 0; i < this.numStars * (this.bodyHeight / this.height); i++) {
this.stars.push({
x: Math.random() * this.width,
y: Math.random() * this.bodyHeight,
radius: Math.random() * 1.5 + 0.5,
alpha: this.minBlink + Math.random() * (this.maxBlink - this.minBlink),
alphaChange: (Math.random() * this.blinkSpeed) + 0.0005,
vx: (Math.random() - 0.5) * this.maxSpeed,
vy: (Math.random() - 0.5) * this.maxSpeed
});
}
this.animate();
});
}
@HostListener('window:resize')
@@ -89,8 +99,8 @@ export class Background {
// Bildschirm-Ränder
if (star.x < 0) star.x = this.width;
if (star.x > this.width) star.x = 0;
if (star.y < 0) star.y = document.body.scrollHeight;
if (star.y > document.body.scrollHeight) star.y = 0;
if (star.y < 0) star.y = this.bodyHeight;
if (star.y > this.bodyHeight) star.y = 0;
// Stern zeichnen mit Scroll-Parallax
ctx.beginPath();