90 lines
2.1 KiB
TypeScript
90 lines
2.1 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { IParticlesProps } from 'ng-particles';
|
|
import { DeviceDetectorService } from 'ngx-device-detector';
|
|
import { loadFull } from 'tsparticles';
|
|
import { Container, Engine } from 'tsparticles-engine';
|
|
|
|
@Component({
|
|
selector: 'app-background-particles',
|
|
templateUrl: './background-particles.component.html',
|
|
styleUrls: ['./background-particles.component.scss']
|
|
})
|
|
export class BackgroundParticlesComponent implements OnInit {
|
|
public particleStyles!: any;
|
|
public particleOptions!: IParticlesProps;
|
|
|
|
|
|
constructor(private deviceService: DeviceDetectorService) { }
|
|
|
|
ngOnInit(): void {
|
|
this.particleStyles = {
|
|
position: 'fixed',
|
|
width: '100%',
|
|
height: '100%',
|
|
'z-index': -1,
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
};
|
|
|
|
const color: string = '#96bcf9';
|
|
const lineColor: string = '#afccfa';
|
|
|
|
this.particleOptions = {
|
|
fpsLimit: 30,
|
|
detectRetina: true,
|
|
background: {
|
|
position: "50% 50%",
|
|
repeat: "no-repeat",
|
|
size: "cover"
|
|
},
|
|
fullScreen: {
|
|
zIndex: 1
|
|
},
|
|
particles: {
|
|
number: {
|
|
value: 80,
|
|
density: {
|
|
enable: true,
|
|
value_area: 800
|
|
}
|
|
},
|
|
color: {
|
|
value: color
|
|
},
|
|
opacity: { value: 0.6 },
|
|
links: {
|
|
distance: 150,
|
|
enable: true,
|
|
color: {
|
|
value: lineColor
|
|
},
|
|
opacity: 0.6
|
|
},
|
|
move: {
|
|
enable: true,
|
|
speed: 0.4
|
|
},
|
|
size: {
|
|
random: true,
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
particlesLoaded(container: Container): void {
|
|
|
|
}
|
|
|
|
async particlesInit(engine: Engine): Promise<void> {
|
|
|
|
|
|
// Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
|
|
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
|
|
// starting from v2 you can add only the features you need reducing the bundle size
|
|
await loadFull(engine);
|
|
}
|
|
}
|