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