You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
1.8 KiB
102 lines
1.8 KiB
import { Component, OnInit } from '@angular/core'
|
|
import type { Container } from 'tsparticles'
|
|
|
|
@Component({
|
|
selector: 'app-app-layout',
|
|
templateUrl: './app-layout.component.html',
|
|
styleUrls: ['./app-layout.component.scss']
|
|
})
|
|
export class AppLayoutComponent implements OnInit {
|
|
|
|
public particlesEnabled: boolean = false
|
|
public id: string = 'tsparticles'
|
|
|
|
public particlesOptions: any = {
|
|
background: {
|
|
color: {
|
|
value: "transparent"
|
|
}
|
|
},
|
|
fpsLimit: 60,
|
|
interactivity: {
|
|
detectsOn: "canvas",
|
|
events: {
|
|
onClick: {
|
|
enable: true,
|
|
mode: "push"
|
|
},
|
|
onHover: {
|
|
enable: true,
|
|
mode: "repulse"
|
|
},
|
|
resize: true
|
|
},
|
|
modes: {
|
|
bubble: {
|
|
distance: 200,
|
|
duration: 2,
|
|
opacity: 0.8,
|
|
size: 40
|
|
},
|
|
push: {
|
|
quantity: 6
|
|
},
|
|
repulse: {
|
|
distance: 100,
|
|
duration: 0.4
|
|
}
|
|
}
|
|
},
|
|
particles: {
|
|
color: {
|
|
value: "#fff"
|
|
},
|
|
links: {
|
|
color: "#fff",
|
|
distance: 150,
|
|
enable: true,
|
|
opacity: 0.7,
|
|
width: 1
|
|
},
|
|
collisions: {
|
|
enable: true
|
|
},
|
|
move: {
|
|
direction: "none",
|
|
enable: true,
|
|
outMode: "bounce",
|
|
random: false,
|
|
speed: 2,
|
|
straight: false
|
|
},
|
|
number: {
|
|
density: {
|
|
enable: true,
|
|
value_area: 600
|
|
},
|
|
value: 90
|
|
},
|
|
opacity: {
|
|
value: 0.5
|
|
},
|
|
shape: {
|
|
type: "circle"
|
|
},
|
|
size: {
|
|
random: true,
|
|
value: 5
|
|
}
|
|
},
|
|
detectRetina: true
|
|
}
|
|
|
|
constructor() { }
|
|
|
|
ngOnInit(): void {
|
|
}
|
|
|
|
|
|
particlesLoaded(container: Container): void {
|
|
//console.log('particlesLoaded', container)
|
|
}
|
|
}
|