@tsparticles/move-parallax 3.0.0-alpha.0 → 3.0.0-beta.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 +15 -11
- package/browser/ParallaxMover.js +10 -10
- package/browser/index.js +2 -2
- package/cjs/ParallaxMover.js +10 -10
- package/cjs/index.js +2 -13
- package/esm/ParallaxMover.js +10 -10
- package/esm/index.js +2 -2
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.move.parallax.js +19 -14
- package/tsparticles.move.parallax.min.js +1 -1
- package/tsparticles.move.parallax.min.js.LICENSE.txt +1 -8
- package/types/ParallaxMover.d.ts +1 -1
- package/types/index.d.ts +1 -1
- package/umd/ParallaxMover.js +10 -10
- package/umd/index.js +2 -2
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Parallax Mover
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/move-parallax)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/move-parallax)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/move-parallax) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) move plugin for parallax effect.
|
|
10
10
|
|
|
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the interaction plu
|
|
|
42
42
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
|
43
43
|
|
|
44
44
|
```shell
|
|
45
|
-
$ npm install tsparticles
|
|
45
|
+
$ npm install @tsparticles/move-parallax
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
or
|
|
49
49
|
|
|
50
50
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
51
|
+
$ yarn add @tsparticles/move-parallax
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
Then you need to import it in the app, like this:
|
|
55
55
|
|
|
56
56
|
```javascript
|
|
57
|
-
const { tsParticles } = require("tsparticles
|
|
58
|
-
const { loadParallaxMover } = require("tsparticles
|
|
57
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
58
|
+
const { loadParallaxMover } = require("@tsparticles/move-parallax");
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
await loadParallaxMover(tsParticles);
|
|
62
|
+
})();
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
or
|
|
64
66
|
|
|
65
67
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadParallaxMover } from "tsparticles
|
|
68
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
69
|
+
import { loadParallaxMover } from "@tsparticles/move-parallax";
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(async () => {
|
|
72
|
+
await loadParallaxMover(tsParticles);
|
|
73
|
+
})();
|
|
70
74
|
```
|
package/browser/ParallaxMover.js
CHANGED
|
@@ -8,22 +8,22 @@ export class ParallaxMover {
|
|
|
8
8
|
particle.container.actualOptions.interactivity.events.onHover.parallax.enable);
|
|
9
9
|
}
|
|
10
10
|
move(particle) {
|
|
11
|
-
const container = particle.container, options = container.actualOptions;
|
|
12
|
-
if (isSsr() || !
|
|
11
|
+
const container = particle.container, options = container.actualOptions, parallaxOptions = options.interactivity.events.onHover.parallax;
|
|
12
|
+
if (isSsr() || !parallaxOptions.enable) {
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
|
-
const parallaxForce =
|
|
15
|
+
const parallaxForce = parallaxOptions.force, mousePos = container.interactivity.mouse.position;
|
|
16
16
|
if (!mousePos) {
|
|
17
17
|
return;
|
|
18
18
|
}
|
|
19
|
-
const canvasCenter = {
|
|
20
|
-
x:
|
|
21
|
-
y:
|
|
22
|
-
}, parallaxSmooth =
|
|
19
|
+
const canvasSize = container.canvas.size, canvasCenter = {
|
|
20
|
+
x: canvasSize.width / 2,
|
|
21
|
+
y: canvasSize.height / 2,
|
|
22
|
+
}, parallaxSmooth = parallaxOptions.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
|
|
23
23
|
x: (mousePos.x - canvasCenter.x) * factor,
|
|
24
24
|
y: (mousePos.y - canvasCenter.y) * factor,
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
}, { offset } = particle;
|
|
26
|
+
offset.x += (centerDistance.x - offset.x) / parallaxSmooth;
|
|
27
|
+
offset.y += (centerDistance.y - offset.y) / parallaxSmooth;
|
|
28
28
|
}
|
|
29
29
|
}
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ParallaxMover } from "./ParallaxMover";
|
|
2
|
-
export async function loadParallaxMover(engine) {
|
|
3
|
-
engine.addMover("parallax", () => new ParallaxMover());
|
|
2
|
+
export async function loadParallaxMover(engine, refresh = true) {
|
|
3
|
+
await engine.addMover("parallax", () => new ParallaxMover(), refresh);
|
|
4
4
|
}
|
package/cjs/ParallaxMover.js
CHANGED
|
@@ -11,23 +11,23 @@ class ParallaxMover {
|
|
|
11
11
|
particle.container.actualOptions.interactivity.events.onHover.parallax.enable);
|
|
12
12
|
}
|
|
13
13
|
move(particle) {
|
|
14
|
-
const container = particle.container, options = container.actualOptions;
|
|
15
|
-
if ((0, engine_1.isSsr)() || !
|
|
14
|
+
const container = particle.container, options = container.actualOptions, parallaxOptions = options.interactivity.events.onHover.parallax;
|
|
15
|
+
if ((0, engine_1.isSsr)() || !parallaxOptions.enable) {
|
|
16
16
|
return;
|
|
17
17
|
}
|
|
18
|
-
const parallaxForce =
|
|
18
|
+
const parallaxForce = parallaxOptions.force, mousePos = container.interactivity.mouse.position;
|
|
19
19
|
if (!mousePos) {
|
|
20
20
|
return;
|
|
21
21
|
}
|
|
22
|
-
const canvasCenter = {
|
|
23
|
-
x:
|
|
24
|
-
y:
|
|
25
|
-
}, parallaxSmooth =
|
|
22
|
+
const canvasSize = container.canvas.size, canvasCenter = {
|
|
23
|
+
x: canvasSize.width / 2,
|
|
24
|
+
y: canvasSize.height / 2,
|
|
25
|
+
}, parallaxSmooth = parallaxOptions.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
|
|
26
26
|
x: (mousePos.x - canvasCenter.x) * factor,
|
|
27
27
|
y: (mousePos.y - canvasCenter.y) * factor,
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
}, { offset } = particle;
|
|
29
|
+
offset.x += (centerDistance.x - offset.x) / parallaxSmooth;
|
|
30
|
+
offset.y += (centerDistance.y - offset.y) / parallaxSmooth;
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
exports.ParallaxMover = ParallaxMover;
|
package/cjs/index.js
CHANGED
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
3
|
exports.loadParallaxMover = void 0;
|
|
13
4
|
const ParallaxMover_1 = require("./ParallaxMover");
|
|
14
|
-
function loadParallaxMover(engine) {
|
|
15
|
-
|
|
16
|
-
engine.addMover("parallax", () => new ParallaxMover_1.ParallaxMover());
|
|
17
|
-
});
|
|
5
|
+
async function loadParallaxMover(engine, refresh = true) {
|
|
6
|
+
await engine.addMover("parallax", () => new ParallaxMover_1.ParallaxMover(), refresh);
|
|
18
7
|
}
|
|
19
8
|
exports.loadParallaxMover = loadParallaxMover;
|
package/esm/ParallaxMover.js
CHANGED
|
@@ -8,22 +8,22 @@ export class ParallaxMover {
|
|
|
8
8
|
particle.container.actualOptions.interactivity.events.onHover.parallax.enable);
|
|
9
9
|
}
|
|
10
10
|
move(particle) {
|
|
11
|
-
const container = particle.container, options = container.actualOptions;
|
|
12
|
-
if (isSsr() || !
|
|
11
|
+
const container = particle.container, options = container.actualOptions, parallaxOptions = options.interactivity.events.onHover.parallax;
|
|
12
|
+
if (isSsr() || !parallaxOptions.enable) {
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
|
-
const parallaxForce =
|
|
15
|
+
const parallaxForce = parallaxOptions.force, mousePos = container.interactivity.mouse.position;
|
|
16
16
|
if (!mousePos) {
|
|
17
17
|
return;
|
|
18
18
|
}
|
|
19
|
-
const canvasCenter = {
|
|
20
|
-
x:
|
|
21
|
-
y:
|
|
22
|
-
}, parallaxSmooth =
|
|
19
|
+
const canvasSize = container.canvas.size, canvasCenter = {
|
|
20
|
+
x: canvasSize.width / 2,
|
|
21
|
+
y: canvasSize.height / 2,
|
|
22
|
+
}, parallaxSmooth = parallaxOptions.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
|
|
23
23
|
x: (mousePos.x - canvasCenter.x) * factor,
|
|
24
24
|
y: (mousePos.y - canvasCenter.y) * factor,
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
}, { offset } = particle;
|
|
26
|
+
offset.x += (centerDistance.x - offset.x) / parallaxSmooth;
|
|
27
|
+
offset.y += (centerDistance.y - offset.y) / parallaxSmooth;
|
|
28
28
|
}
|
|
29
29
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ParallaxMover } from "./ParallaxMover";
|
|
2
|
-
export async function loadParallaxMover(engine) {
|
|
3
|
-
engine.addMover("parallax", () => new ParallaxMover());
|
|
2
|
+
export async function loadParallaxMover(engine, refresh = true) {
|
|
3
|
+
await engine.addMover("parallax", () => new ParallaxMover(), refresh);
|
|
4
4
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/move-parallax",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.0",
|
|
4
4
|
"description": "tsParticles Parallax movement",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -45,10 +45,11 @@
|
|
|
45
45
|
"unpkg": "tsparticles.move.parallax.min.js",
|
|
46
46
|
"module": "esm/index.js",
|
|
47
47
|
"types": "types/index.d.ts",
|
|
48
|
+
"sideEffects": false,
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"@tsparticles/engine": "^3.0.0-beta.0"
|
|
51
|
+
},
|
|
48
52
|
"publishConfig": {
|
|
49
53
|
"access": "public"
|
|
50
|
-
},
|
|
51
|
-
"dependencies": {
|
|
52
|
-
"@tsparticles/engine": "^3.0.0-alpha.0"
|
|
53
54
|
}
|
|
54
|
-
}
|
|
55
|
+
}
|