Skip to content

Commit 478b992

Browse files
Brackets-CoderBrackets-Coder
authored
add particles js library files
1 parent be5f6d3 commit 478b992

File tree

6 files changed

+455
-0
lines changed

6 files changed

+455
-0
lines changed

‎docs/libraries/particles.js-master/LICENSE.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015, Vincent Garreau
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎docs/libraries/particles.js-master/README.md‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
## particles.js
2+
3+
### A lightweight JavaScript library for creating particles.
4+
5+
------------------------------
6+
### `Demo / Generator`
7+
8+
<a href="http://vincentgarreau.com/particles.js/" target="_blank"><img src="http://vincentgarreau.com/particles.js/assets/img/github-screen.jpg" alt="particles.js generator" /></a>
9+
10+
Configure, export, and share your particles.js configuration on CodePen: <br />
11+
http://vincentgarreau.com/particles.js/
12+
13+
CodePen demo: <br />
14+
http://codepen.io/VincentGarreau/pen/pnlso
15+
16+
-------------------------------
17+
### `Usage`
18+
19+
Load particles.js and configure the particles:
20+
21+
**index.html**
22+
```html
23+
<div id="particles-js"></div>
24+
25+
<script src="particles.js"></script>
26+
```
27+
28+
**app.js**
29+
```javascript
30+
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
31+
particlesJS.load('particles-js', 'assets/particles.json', function() {
32+
console.log('callback - particles.js config loaded');
33+
});
34+
```
35+
36+
**particles.json**
37+
```javascript
38+
{
39+
"particles": {
40+
"number": {
41+
"value": 80,
42+
"density": {
43+
"enable": true,
44+
"value_area": 800
45+
}
46+
},
47+
"color": {
48+
"value": "#ffffff"
49+
},
50+
"shape": {
51+
"type": "circle",
52+
"stroke": {
53+
"width": 0,
54+
"color": "#000000"
55+
},
56+
"polygon": {
57+
"nb_sides": 5
58+
},
59+
"image": {
60+
"src": "img/github.svg",
61+
"width": 100,
62+
"height": 100
63+
}
64+
},
65+
"opacity": {
66+
"value": 0.5,
67+
"random": false,
68+
"anim": {
69+
"enable": false,
70+
"speed": 1,
71+
"opacity_min": 0.1,
72+
"sync": false
73+
}
74+
},
75+
"size": {
76+
"value": 10,
77+
"random": true,
78+
"anim": {
79+
"enable": false,
80+
"speed": 80,
81+
"size_min": 0.1,
82+
"sync": false
83+
}
84+
},
85+
"line_linked": {
86+
"enable": true,
87+
"distance": 300,
88+
"color": "#ffffff",
89+
"opacity": 0.4,
90+
"width": 2
91+
},
92+
"move": {
93+
"enable": true,
94+
"speed": 12,
95+
"direction": "none",
96+
"random": false,
97+
"straight": false,
98+
"out_mode": "out",
99+
"bounce": false,
100+
"attract": {
101+
"enable": false,
102+
"rotateX": 600,
103+
"rotateY": 1200
104+
}
105+
}
106+
},
107+
"interactivity": {
108+
"detect_on": "canvas",
109+
"events": {
110+
"onhover": {
111+
"enable": false,
112+
"mode": "repulse"
113+
},
114+
"onclick": {
115+
"enable": true,
116+
"mode": "push"
117+
},
118+
"resize": true
119+
},
120+
"modes": {
121+
"grab": {
122+
"distance": 800,
123+
"line_linked": {
124+
"opacity": 1
125+
}
126+
},
127+
"bubble": {
128+
"distance": 800,
129+
"size": 80,
130+
"duration": 2,
131+
"opacity": 0.8,
132+
"speed": 3
133+
},
134+
"repulse": {
135+
"distance": 400,
136+
"duration": 0.4
137+
},
138+
"push": {
139+
"particles_nb": 4
140+
},
141+
"remove": {
142+
"particles_nb": 2
143+
}
144+
}
145+
},
146+
"retina_detect": true
147+
}
148+
```
149+
150+
-------------------------------
151+
152+
### `Options`
153+
154+
key | option type / notes | example
155+
----|---------|------
156+
`particles.number.value` | number | `40`
157+
`particles.number.density.enable` | boolean | `true` / `false`
158+
`particles.number.density.value_area` | number | `800`
159+
`particles.color.value` | HEX (string) <br /> RGB (object) <br /> HSL (object) <br /> array selection (HEX) <br /> random (string) | `"#b61924"` <br /> `{r:182, g:25, b:36}` <br /> `{h:356, s:76, l:41}` <br /> `["#b61924", "#333333", "999999"]` <br /> `"random"`
160+
`particles.shape.type` | string <br /> array selection | `"circle"` <br /> `"edge"` <br /> `"triangle"` <br /> `"polygon"` <br /> `"star"` <br /> `"image"` <br /> `["circle", "triangle", "image"]`
161+
`particles.shape.stroke.width` | number | `2`
162+
`particles.shape.stroke.color` | HEX (string) | `"#222222"`
163+
`particles.shape.polygon.nb_slides` | number | `5`
164+
`particles.shape.image.src` | path link <br /> svg / png / gif / jpg | `"assets/img/yop.svg"` <br /> `"http://mywebsite.com/assets/img/yop.png"`
165+
`particles.shape.image.width` | number <br />(for aspect ratio) | `100`
166+
`particles.shape.image.height` | number <br />(for aspect ratio) | `100`
167+
`particles.opacity.value` | number (0 to 1) | `0.75`
168+
`particles.opacity.random` | boolean | `true` / `false`
169+
`particles.opacity.anim.enable` | boolean | `true` / `false`
170+
`particles.opacity.anim.speed` | number | `3`
171+
`particles.opacity.anim.opacity_min` | number (0 to 1) | `0.25`
172+
`particles.opacity.anim.sync` | boolean | `true` / `false`
173+
`particles.size.value` | number | `20`
174+
`particles.size.random` | boolean | `true` / `false`
175+
`particles.size.anim.enable` | boolean | `true` / `false`
176+
`particles.size.anim.speed` | number | `3`
177+
`particles.size.anim.size_min` | number | `0.25`
178+
`particles.size.anim.sync` | boolean | `true` / `false`
179+
`particles.line_linked.enable` | boolean | `true` / `false`
180+
`particles.line_linked.distance` | number | `150`
181+
`particles.line_linked.color` | HEX (string) | `#ffffff`
182+
`particles.line_linked.opacity` | number (0 to 1) | `0.5`
183+
`particles.line_linked.width` | number | `1.5`
184+
`particles.move.enable` | boolean | `true` / `false`
185+
`particles.move.speed` | number | `4`
186+
`particles.move.direction` | string | `"none"` <br /> `"top"` <br /> `"top-right"` <br /> `"right"` <br /> `"bottom-right"` <br /> `"bottom"` <br /> `"bottom-left"` <br /> `"left"` <br /> `"top-left"`
187+
`particles.move.random` | boolean | `true` / `false`
188+
`particles.move.straight` | boolean | `true` / `false`
189+
`particles.move.out_mode` | string <br /> (out of canvas) | `"out"` <br /> `"bounce"`
190+
`particles.move.bounce` | boolean <br /> (between particles) | `true` / `false`
191+
`particles.move.attract.enable` | boolean | `true` / `false`
192+
`particles.move.attract.rotateX` | number | `3000`
193+
`particles.move.attract.rotateY` | number | `1500`
194+
`interactivity.detect_on` | string | `"canvas", "window"`
195+
`interactivity.events.onhover.enable` | boolean | `true` / `false`
196+
`interactivity.events.onhover.mode` | string <br /> array selection | `"grab"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["grab", "bubble"]`
197+
`interactivity.events.onclick.enable` | boolean | `true` / `false`
198+
`interactivity.events.onclick.mode` | string <br /> array selection | `"push"` <br /> `"remove"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["push", "repulse"]`
199+
`interactivity.events.resize` | boolean | `true` / `false`
200+
`interactivity.events.modes.grab.distance` | number | `100`
201+
`interactivity.events.modes.grab.line_linked.opacity` | number (0 to 1) | `0.75`
202+
`interactivity.events.modes.bubble.distance` | number | `100`
203+
`interactivity.events.modes.bubble.size` | number | `40`
204+
`interactivity.events.modes.bubble.duration` | number <br /> (second) | `0.4`
205+
`interactivity.events.modes.repulse.distance` | number | `200`
206+
`interactivity.events.modes.repulse.duration` | number <br /> (second) | `1.2`
207+
`interactivity.events.modes.push.particles_nb` | number | `4`
208+
`interactivity.events.modes.push.particles_nb` | number | `4`
209+
`retina_detect` | boolean | `true` / `false`
210+
211+
-------------------------------
212+
213+
### `Packages install`
214+
215+
##### ***npm***
216+
https://www.npmjs.com/package/particles.js
217+
```
218+
npm install particles.js
219+
```
220+
221+
##### ***Bower***
222+
```
223+
bower install particles.js --save
224+
```
225+
226+
##### ***Rails Assets***
227+
```
228+
gem 'rails-assets-particles.js'
229+
```
230+
231+
##### ***Meteor***
232+
https://atmospherejs.com/newswim/particles
233+
```
234+
meteor add newswim:particles
235+
```
236+
237+
-------------------------------
238+
239+
### `Hosting / CDN`
240+
241+
***Please use this host or your own to load particles.js on your projects***
242+
243+
http://www.jsdelivr.com/#!particles.js

0 commit comments

Comments
 (0)