canvasparticles-js 3.4.4 → 3.4.6

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.
Files changed (4) hide show
  1. package/README.md +55 -28
  2. package/canvasParticles.js +1 -1
  3. package/canvasParticles.mjs +1 -1
  4. package/package.json +59 -59
package/README.md CHANGED
@@ -12,7 +12,7 @@ Creating a fun and interactive background. Colors, interaction and gravity can b
12
12
  [Showcase](#showcase)<br>
13
13
  [Implementation](#implementation)<br>
14
14
  [Options](#options)<br>
15
- [Example](#one-pager-example)
15
+ [One pager example](#one-pager-example)
16
16
 
17
17
  ## Showcase
18
18
 
@@ -40,37 +40,48 @@ Resize the `<canvas>` so it covers the whole page and place it behind all elemen
40
40
  }
41
41
  ```
42
42
 
43
- <details>
44
- <summary><h3>Import globally</h3></summary>
45
-
46
- Add a `<script>` element in the `<head>` to import the *canvasParticles.js* file.<br>
47
- ```html
48
- <head>
49
- <script src="./canvasParticles.js" defer></script>
50
- </head>
51
- ```
43
+ <details open>
44
+ <summary><h3>Import with npm</h3></summary>
52
45
 
53
- Add an inline `<script>` element at the very bottom of the `<body>`.
46
+ ```batch
47
+ npm install canvasparticles-js
48
+ ```
49
+
50
+ Add a `<script>` element in the `<head>` to import _initParticles.js_.
54
51
 
55
52
  ```html
56
- <body>
57
- ...
53
+ <head>
54
+ <script src="./initParticles.js" type="module"></script>
55
+ </head>
56
+ ```
58
57
 
59
- <script>
60
- const initParticles = () => {
61
- const selector = '#canvas-particles' // Query Selector for the canvas
62
- const options = { ... } // See #options
63
- new CanvasParticles(selector, options).start()
64
- }
65
- document.addEventListener('DOMContentLoaded', initParticles)
66
- </script>
67
- </body>
58
+ Inside _initParticles.js_:
59
+
60
+ ```js
61
+ import CanvasParticles from 'canvasparticles-js'
62
+
63
+ const selector = '#canvas-particles' // Query Selector for the canvas
64
+ const options = { ... } // See #options
65
+ new CanvasParticles(selector, options).start()
66
+ ```
67
+
68
+ </details>
69
+
70
+ <details>
71
+ <summary><h3>Import with jsDelivr</h3></summary>
72
+
73
+ Add a `<script>` element in the `<head>` to import `CanvasParticles`.
74
+
75
+ ```html
76
+ <head>
77
+ <script src="https://cdn.jsdelivr.net/npm/canvasparticles-js/canvasParticles.min.js" defer></script>
78
+ </head>
68
79
  ```
69
80
 
70
81
  </details>
71
82
 
72
83
  <details>
73
- <summary><h3>Import as ES module</h3></summary>
84
+ <summary><h3>Import raw file as ES module</h3></summary>
74
85
 
75
86
  Be aware that using ES modules is only possible when running the application on a (local) server.<br>
76
87
  [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
@@ -96,14 +107,30 @@ new CanvasParticles(selector, options).start()
96
107
  </details>
97
108
 
98
109
  <details>
99
- <summary><h3>Import with jsDelivr</h3></summary>
110
+ <summary><h3>Import raw file globally</h3></summary>
111
+
112
+ Add a `<script>` element in the `<head>` to import the *canvasParticles.js* file.<br>
113
+ ```html
114
+ <head>
115
+ <script src="./canvasParticles.js" defer></script>
116
+ </head>
117
+ ```
100
118
 
101
- Add a `<script>` element in the `<head>` to import `CanvasParticles`.
119
+ Add an inline `<script>` element at the very bottom of the `<body>`.
102
120
 
103
121
  ```html
104
- <head>
105
- <script src="https://cdn.jsdelivr.net/npm/canvasparticles-js/canvasParticles.min.js" defer></script>
106
- </head>
122
+ <body>
123
+ ...
124
+
125
+ <script>
126
+ const initParticles = () => {
127
+ const selector = '#canvas-particles' // Query Selector for the canvas
128
+ const options = { ... } // See #options
129
+ new CanvasParticles(selector, options).start()
130
+ }
131
+ document.addEventListener('DOMContentLoaded', initParticles)
132
+ </script>
133
+ </body>
107
134
  ```
108
135
 
109
136
  </details>
package/canvasParticles.js CHANGED
@@ -9,7 +9,7 @@
9
9
  typeof self !== 'undefined' ? self : this,
10
10
  () =>
11
11
  class CanvasParticles {
12
- static version = '3.4.4'
12
+ static version = '3.4.6'
13
13
 
14
14
  /**
15
15
  * Creates a new CanvasParticles instance.
package/canvasParticles.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  // https://github.com/Khoeckman/canvasParticles/blob/main/LICENSE
3
3
 
4
4
  export default class CanvasParticles {
5
- static version = '3.4.4'
5
+ static version = '3.4.6'
6
6
 
7
7
  /**
8
8
  * Creates a new CanvasParticles instance.
package/package.json CHANGED
@@ -1,59 +1,59 @@
1
- {
2
- "name": "canvasparticles-js",
3
- "version": "3.4.4",
4
- "description": "In an HTML canvas, a bunch of interactive particles connected with lines when they approach each other.",
5
- "main": "canvasParticles.js",
6
- "module": "canvasParticles.mjs",
7
- "types": "canvasParticles.d.ts",
8
- "type": "module",
9
- "files": [
10
- "./canvasparticles.d.ts",
11
- "./canvasParticles.js",
12
- "./canvasParticles.mjs"
13
- ],
14
- "exports": {
15
- ".": {
16
- "require": "./canvasParticles.js",
17
- "import": "./canvasParticles.mjs"
18
- }
19
- },
20
- "engines": {
21
- "node": ">=14"
22
- },
23
- "repository": {
24
- "type": "git",
25
- "url": "git+https://github.com/Khoeckman/canvasParticles.git"
26
- },
27
- "author": "Kyle Hoeckman",
28
- "license": "MIT",
29
- "bugs": {
30
- "url": "https://github.com/Khoeckman/canvasParticles/issues"
31
- },
32
- "homepage": "https://canvasparticleshomepage.onrender.com/",
33
- "keywords": [
34
- "front-end",
35
- "frontend",
36
- "canvas",
37
- "particle",
38
- "particles",
39
- "jsparticles",
40
- "js-particles",
41
- "particles.js",
42
- "particles-js",
43
- "xparticles",
44
- "background",
45
- "animation",
46
- "animated",
47
- "interactive",
48
- "interaction",
49
- "web",
50
- "webdesign",
51
- "web-design",
52
- "javascript",
53
- "js",
54
- "ecmascript",
55
- "module",
56
- "html5",
57
- "html"
58
- ]
59
- }
1
+ {
2
+ "name": "canvasparticles-js",
3
+ "version": "3.4.6",
4
+ "description": "In an HTML canvas, a bunch of interactive particles connected with lines when they approach each other.",
5
+ "main": "canvasParticles.js",
6
+ "module": "canvasParticles.mjs",
7
+ "types": "canvasParticles.d.ts",
8
+ "type": "module",
9
+ "files": [
10
+ "./canvasparticles.d.ts",
11
+ "./canvasParticles.js",
12
+ "./canvasParticles.mjs"
13
+ ],
14
+ "exports": {
15
+ ".": {
16
+ "require": "./canvasParticles.js",
17
+ "import": "./canvasParticles.mjs"
18
+ }
19
+ },
20
+ "engines": {
21
+ "node": ">=14"
22
+ },
23
+ "repository": {
24
+ "type": "git",
25
+ "url": "git+https://github.com/Khoeckman/canvasParticles.git"
26
+ },
27
+ "author": "Kyle Hoeckman",
28
+ "license": "MIT",
29
+ "bugs": {
30
+ "url": "https://github.com/Khoeckman/canvasParticles/issues"
31
+ },
32
+ "homepage": "https://canvasparticleshomepage.onrender.com/",
33
+ "keywords": [
34
+ "front-end",
35
+ "frontend",
36
+ "canvas",
37
+ "particle",
38
+ "particles",
39
+ "jsparticles",
40
+ "js-particles",
41
+ "particles.js",
42
+ "particles-js",
43
+ "xparticles",
44
+ "background",
45
+ "animation",
46
+ "animated",
47
+ "interactive",
48
+ "interaction",
49
+ "web",
50
+ "webdesign",
51
+ "web-design",
52
+ "javascript",
53
+ "js",
54
+ "ecmascript",
55
+ "module",
56
+ "html5",
57
+ "html"
58
+ ]
59
+ }