Try particles
This commit is contained in:
1
src/app/layout/background/particles-bg.component.html
Normal file
1
src/app/layout/background/particles-bg.component.html
Normal file
@@ -0,0 +1 @@
|
||||
<canvas #canvas class="particles"></canvas>
|
||||
2
src/app/layout/background/particles-bg.component.scss
Normal file
2
src/app/layout/background/particles-bg.component.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
:host { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
|
||||
.particles { width: 100%; height: 100%; display: block; }
|
||||
68
src/app/layout/background/particles-bg.component.ts
Normal file
68
src/app/layout/background/particles-bg.component.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
|
||||
import {loadFull} from 'tsparticles';
|
||||
|
||||
@Component({
|
||||
selector: 'app-particles-bg',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './particles-bg.component.html',
|
||||
styleUrl: './particles-bg.component.scss',
|
||||
})
|
||||
export class ParticlesBgComponent implements AfterViewInit, OnDestroy {
|
||||
@ViewChild('canvas', { static: true }) canvasRef!: ElementRef<HTMLCanvasElement>;
|
||||
|
||||
private container?: Container;
|
||||
|
||||
async ngAfterViewInit() {
|
||||
const engine = new Engine();
|
||||
await loadFull(engine);
|
||||
|
||||
const options: ISourceOptions = {
|
||||
fullScreen: { enable: false }, // we manage size via the canvas
|
||||
background: { color: { value: 'transparent' } },
|
||||
fpsLimit: 60,
|
||||
detectRetina: true,
|
||||
interactivity: {
|
||||
events: {
|
||||
onClick: { enable: true, mode: 'push' },
|
||||
onHover: { enable: false, mode: 'repulse' },
|
||||
resize: true
|
||||
},
|
||||
modes: {
|
||||
push: { quantity: 4 } // <- number of new vertices per click
|
||||
}
|
||||
},
|
||||
particles: {
|
||||
number: { value: 55, density: { enable: true, area: 900 } },
|
||||
color: { value: '#23b7ff' },
|
||||
opacity: { value: 0.35 },
|
||||
size: { value: { min: 1, max: 3 } },
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 0.7,
|
||||
outModes: { default: 'out' }
|
||||
},
|
||||
links: {
|
||||
enable: true,
|
||||
distance: 140,
|
||||
color: '#23b7ff',
|
||||
opacity: 0.25,
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.container = await engine.load({
|
||||
element: this.canvasRef.nativeElement,
|
||||
options
|
||||
});
|
||||
|
||||
// Let clicks go through to the canvas (we want pointer events on canvas only)
|
||||
this.canvasRef.nativeElement.style.pointerEvents = 'auto';
|
||||
(this.canvasRef.nativeElement.parentElement as HTMLElement).style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.container?.destroy();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user