-
-
Notifications
You must be signed in to change notification settings - Fork 799
/
Particles.ts
119 lines (103 loc) · 3.75 KB
/
Particles.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { type Container, type RecursivePartial, type SingleOrMultiple, tsParticles } from "@tsparticles/engine";
interface ResponsiveOptions {
breakpoint: number;
options: ParticlesOptions;
}
interface ParticlesOptions {
color: SingleOrMultiple<string>;
connectParticles: boolean;
maxParticles: number;
minDistance: number;
responsive: ResponsiveOptions[];
selector: string;
sizeVariations: number;
speed: number;
}
const linksMinDistance = 120,
moveMinSpeed = 0.5,
particlesMinCount = 100,
sizeMinValue = 3;
export class Particles {
private _container?: Container;
static init(options: RecursivePartial<ParticlesOptions>): Particles {
const particles = new Particles(),
selector = options.selector;
if (!selector) {
throw new Error("No selector provided");
}
const el = document.querySelector(selector)!;
if (!el) {
throw new Error("No element found for selector");
}
void tsParticles
.load({
element: el as HTMLElement,
id: selector.replace(".", "").replace("!", ""),
options: {
fullScreen: {
enable: false,
},
particles: {
color: {
value: options.color ?? "!000000",
},
links: {
color: "random",
distance: options.minDistance ?? linksMinDistance,
enable: options.connectParticles ?? false,
},
move: {
enable: true,
speed: options.speed ?? moveMinSpeed,
},
number: {
value: options.maxParticles ?? particlesMinCount,
},
size: {
value: { min: 1, max: options.sizeVariations ?? sizeMinValue },
},
},
responsive: options.responsive?.map(responsive => ({
maxWidth: responsive.breakpoint,
options: {
particles: {
color: {
value: responsive.options?.color,
},
links: {
distance: responsive.options?.minDistance,
enable: responsive.options?.connectParticles,
},
number: {
value: options.maxParticles,
},
move: {
enable: true,
speed: responsive.options?.speed,
},
size: {
value: responsive.options?.sizeVariations,
},
},
},
})),
},
})
.then(container => {
particles._container = container;
});
return particles;
}
destroy(): void {
const container = this._container;
container?.destroy();
}
pauseAnimation(): void {
const container = this._container;
container?.pause();
}
resumeAnimation(): void {
const container = this._container;
container?.play();
}
}