tsparticles 2.0.6 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -15
- package/package.json +11 -11
- package/report.html +2 -2
- package/tsparticles.bundle.js +3123 -1171
- package/tsparticles.bundle.min.js +2 -2
- package/tsparticles.js +54 -80
- package/tsparticles.min.js +2 -2
- package/939.js +0 -1780
package/README.md
CHANGED
|
@@ -51,11 +51,13 @@ is enough, and if this is done the `tsparticles-engine` is not needed, since it'
|
|
|
51
51
|
Once the scripts are loaded you can set up `tsParticles` like this:
|
|
52
52
|
|
|
53
53
|
```javascript
|
|
54
|
-
|
|
54
|
+
(async () => {
|
|
55
|
+
await loadFull(tsParticles); // not needed if using the bundle script, required for any other installation
|
|
55
56
|
|
|
56
|
-
tsParticles.load("tsparticles", {
|
|
57
|
-
|
|
58
|
-
});
|
|
57
|
+
await tsParticles.load("tsparticles", {
|
|
58
|
+
/* options */
|
|
59
|
+
});
|
|
60
|
+
})();
|
|
59
61
|
```
|
|
60
62
|
|
|
61
63
|
### React.js / Preact / Inferno
|
|
@@ -117,10 +119,14 @@ export function ParticlesContainer(props: unknown) {
|
|
|
117
119
|
_The syntax for `Vue.js 2.x` and `3.x` is the same_
|
|
118
120
|
|
|
119
121
|
```vue
|
|
120
|
-
<Particles id="tsparticles" :particlesInit="particlesInit"
|
|
122
|
+
<Particles id="tsparticles" :particlesInit="particlesInit" :options="options" />
|
|
121
123
|
```
|
|
122
124
|
|
|
123
125
|
```js
|
|
126
|
+
const options = {
|
|
127
|
+
/* custom options */
|
|
128
|
+
};
|
|
129
|
+
|
|
124
130
|
async function particlesInit(engine: Engine): Promise<void> {
|
|
125
131
|
await loadFull(engine);
|
|
126
132
|
}
|
|
@@ -129,15 +135,14 @@ async function particlesInit(engine: Engine): Promise<void> {
|
|
|
129
135
|
### Angular
|
|
130
136
|
|
|
131
137
|
```html
|
|
132
|
-
<ng-particles
|
|
133
|
-
[id]="id"
|
|
134
|
-
[options]="particlesOptions"
|
|
135
|
-
(particlesLoaded)="particlesLoaded($event)"
|
|
136
|
-
[particlesInit]="particlesInit"
|
|
137
|
-
></ng-particles>
|
|
138
|
+
<ng-particles [id]="id" [options]="options" [particlesInit]="particlesInit"></ng-particles>
|
|
138
139
|
```
|
|
139
140
|
|
|
140
141
|
```ts
|
|
142
|
+
const options = {
|
|
143
|
+
/* custom options */
|
|
144
|
+
};
|
|
145
|
+
|
|
141
146
|
async function particlesInit(engine: Engine): Promise<void> {
|
|
142
147
|
await loadFull(engine);
|
|
143
148
|
}
|
|
@@ -147,15 +152,21 @@ async function particlesInit(engine: Engine): Promise<void> {
|
|
|
147
152
|
|
|
148
153
|
```sveltehtml
|
|
149
154
|
|
|
155
|
+
<script>
|
|
156
|
+
</script>
|
|
150
157
|
<Particles
|
|
151
158
|
id="tsparticles"
|
|
152
|
-
|
|
153
|
-
|
|
159
|
+
options={options}
|
|
160
|
+
particlesInit={particlesInit}
|
|
154
161
|
/>
|
|
155
162
|
```
|
|
156
163
|
|
|
157
164
|
```js
|
|
158
|
-
let
|
|
159
|
-
|
|
165
|
+
let options = {
|
|
166
|
+
/* custom options */
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
let particlesInit = async (engine) => {
|
|
170
|
+
await loadFull(engine);
|
|
160
171
|
};
|
|
161
172
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tsparticles",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
|
|
5
5
|
"homepage": "https://particles.js.org/",
|
|
6
6
|
"repository": {
|
|
@@ -74,15 +74,15 @@
|
|
|
74
74
|
"unpkg": "tsparticles.min.js",
|
|
75
75
|
"types": "types/index.d.ts",
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"tsparticles-engine": "^2.0
|
|
78
|
-
"tsparticles-interaction-external-trail": "^2.0
|
|
79
|
-
"tsparticles-plugin-absorbers": "^2.0
|
|
80
|
-
"tsparticles-plugin-emitters": "^2.0
|
|
81
|
-
"tsparticles-plugin-polygon-mask": "^2.0
|
|
82
|
-
"tsparticles-slim": "^2.0
|
|
83
|
-
"tsparticles-updater-roll": "^2.0
|
|
84
|
-
"tsparticles-updater-tilt": "^2.0
|
|
85
|
-
"tsparticles-updater-twinkle": "^2.0
|
|
86
|
-
"tsparticles-updater-wobble": "^2.0
|
|
77
|
+
"tsparticles-engine": "^2.1.0",
|
|
78
|
+
"tsparticles-interaction-external-trail": "^2.1.0",
|
|
79
|
+
"tsparticles-plugin-absorbers": "^2.1.0",
|
|
80
|
+
"tsparticles-plugin-emitters": "^2.1.0",
|
|
81
|
+
"tsparticles-plugin-polygon-mask": "^2.1.0",
|
|
82
|
+
"tsparticles-slim": "^2.1.0",
|
|
83
|
+
"tsparticles-updater-roll": "^2.1.0",
|
|
84
|
+
"tsparticles-updater-tilt": "^2.1.0",
|
|
85
|
+
"tsparticles-updater-twinkle": "^2.1.0",
|
|
86
|
+
"tsparticles-updater-wobble": "^2.1.0"
|
|
87
87
|
}
|
|
88
88
|
}
|