Skip to content

Commit 2196b1a

Browse files
VincentGarreauVincentGarreau
committed
init
1 parent ef05b2e commit 2196b1a

File tree

12 files changed

+477
-1768
lines changed

12 files changed

+477
-1768
lines changed

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
particles.min.js

‎LICENSE.md

100644100755
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2015, Vincent Garreau
3+
Copyright (c) 2014, Vincent Garreau
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21-
THE SOFTWARE.
21+
THE SOFTWARE.

‎README.md

100644100755
Lines changed: 59 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,7 @@
22

33
### A lightweight JavaScript library for creating particles.
44

5-
------------------------------
6-
### `Demo / Generator`
7-
8-
<a href="http://vincentgarreau.com/particles.js" target="_blank"><img src="https://dl.dropboxusercontent.com/u/19580440/particlesjs-assets/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-
165
-------------------------------
17-
### `Usage`
186

197
Load particles.js and configure the particles:
208

@@ -27,203 +15,82 @@ Load particles.js and configure the particles:
2715

2816
**app.js**
2917
```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
18+
/* particlesJS('dom-id', params);
19+
/* @dom-id : set the html tag id [string, optional, default value : particles-js]
20+
/* @params: set the params [object, optional, default values : check particles.js] */
21+
22+
/* config dom id (optional) + config particles params */
23+
particlesJS('particles-js', {
24+
particles: {
25+
color: '#fff',
26+
color_random: false,
27+
shape: 'circle', // "circle", "edge" or "triangle"
28+
opacity: {
29+
opacity: 1,
30+
anim: {
31+
enable: true,
32+
speed: 1.5,
33+
opacity_min: 0,
34+
sync: false
4535
}
4636
},
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
37+
size: 4,
38+
size_random: true,
39+
nb: 150,
40+
line_linked: {
41+
enable_auto: true,
42+
distance: 100,
43+
color: '#fff',
44+
opacity: 1,
45+
width: 1,
46+
condensed_mode: {
47+
enable: false,
48+
rotateX: 600,
49+
rotateY: 600
7350
}
7451
},
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-
}
52+
anim: {
53+
enable: true,
54+
speed: 1
10555
}
10656
},
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
57+
interactivity: {
58+
enable: true,
59+
mouse: {
60+
distance: 300
11961
},
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": 8,
132-
"speed": 3
133-
},
134-
"repulse": {
135-
"distance": 400,
136-
"duration": 0.4
137-
},
138-
"push": {
139-
"particles_nb": 4
62+
detect_on: 'canvas', // "canvas" or "window"
63+
mode: 'grab',
64+
line_linked: {
65+
opacity: .5
66+
},
67+
events: {
68+
onclick: {
69+
enable: true,
70+
mode: 'push', // "push" or "remove"
71+
nb: 4
14072
},
141-
"remove": {
142-
"particles_nb": 2
73+
onresize: {
74+
enable: true,
75+
mode: 'out', // "out" or "bounce"
76+
density_auto: false,
77+
density_area: 800 // nb_particles = particles.nb * (canvas width * canvas height / 1000) / density_area
14378
}
14479
}
14580
},
146-
"retina_detect": true
147-
}
81+
/* Retina Display Support */
82+
retina_detect: true
83+
});
14884
```
149-
15085
-------------------------------
86+
### ***Live Demo***
87+
<a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank">CodePen demo</a>
15188

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.number.density.value_area` | number | `800`
161-
`particles.shape.type` | string <br /> array selection | `"circle"` <br /> `"edge"` <br /> `"triangle"` <br /> `"polygon"` <br /> `"star"` <br /> `"image"` <br /> `["circle", "triangle", "image"]`
162-
`particles.shape.stroke.width` | number | `2`
163-
`particles.shape.stroke.color` | HEX (string) | `"#222222"`
164-
`particles.shape.polygon.nb_slides` | number | `5`
165-
`particles.shape.image.src` | path link <br /> svg / png / gif / jpg | `"assets/img/yop.svg"` <br /> `"http://mywebsite.com/assets/img/yop.png"`
166-
`particles.shape.image.width` | number <br />(for aspect ratio) | `100`
167-
`particles.shape.image.height` | number <br />(for aspect ratio) | `100`
168-
`particles.opacity.value` | number (0 to 1) | `0.75`
169-
`particles.opacity.random` | boolean | `true` / `false`
170-
`particles.opacity.anim.enable` | boolean | `true` / `false`
171-
`particles.opacity.anim.speed` | number | `3`
172-
`particles.opacity.anim.opacity_min` | number (0 to 1) | `0.25`
173-
`particles.opacity.anim.sync` | boolean | `true` / `false`
174-
`particles.size.value` | number | `20`
175-
`particles.size.random` | boolean | `true` / `false`
176-
`particles.size.anim.enable` | boolean | `true` / `false`
177-
`particles.size.anim.speed` | number | `3`
178-
`particles.size.anim.size_min` | number | `0.25`
179-
`particles.size.anim.sync` | boolean | `true` / `false`
180-
`particles.line_linked.enable` | boolean | `true` / `false`
181-
`particles.line_linked.distance` | number | `150`
182-
`particles.line_linked.color` | HEX (string) | `#ffffff`
183-
`particles.line_linked.opacity` | number (0 to 1) | `0.5`
184-
`particles.line_linked.width` | number | `1.5`
185-
`particles.move.enable` | boolean | `true` / `false`
186-
`particles.move.speed` | number | `4`
187-
`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"`
188-
`particles.move.random` | boolean | `true` / `false`
189-
`particles.move.straight` | boolean | `true` / `false`
190-
`particles.move.out_mode` | string <br /> (out of canvas) | `"out"` <br /> `"bounce"`
191-
`particles.move.bounce` | boolean <br /> (between particles) | `true` / `false`
192-
`particles.move.attract.enable` | boolean | `true` / `false`
193-
`particles.move.attract.rotateX` | number | `3000`
194-
`particles.move.attract.rotateY` | number | `1500`
195-
`interactivity.detect_on` | string | `"canvas", "window"`
196-
`interactivity.events.onhover.enable` | boolean | `true` / `false`
197-
`interactivity.events.onhover.mode` | string <br /> array selection | `"grab"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["grab", "bubble"]`
198-
`interactivity.events.onclick.enable` | boolean | `true` / `false`
199-
`interactivity.events.onclick.mode` | string <br /> array selection | `"push"` <br /> `"remove"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["push", "repulse"]`
200-
`interactivity.events.resize` | boolean | `true` / `false`
201-
`interactivity.events.modes.grab.distance` | number | `100`
202-
`interactivity.events.modes.grab.line_linked.opacity` | number (0 to 1) | `0.75`
203-
`interactivity.events.modes.bubble.distance` | number | `100`
204-
`interactivity.events.modes.bubble.size` | number | `40`
205-
`interactivity.events.modes.bubble.duration` | number <br /> (second) | `0.4`
206-
`interactivity.events.modes.repulse.distance` | number | `200`
207-
`interactivity.events.modes.repulse.duration` | number <br /> (second) | `1.2`
208-
`interactivity.events.modes.push.particles_nb` | number | `4`
209-
`interactivity.events.modes.push.particles_nb` | number | `4`
210-
`retina_detect` | boolean | `true` / `false`
89+
<a href="http://htmlpreview.github.io/?https://github.com/VincentGarreau/particles.js/blob/master/demo/index.html" target="_blank">GitHub demo</a>
21190

21291
-------------------------------
21392

214-
### `Packages install`
215-
216-
##### ***npm***
217-
```
218-
npm install particles.js
219-
```
220-
221-
##### ***Bower***
93+
##### ***Install with Bower***
22294
```
22395
bower install particles.js --save
22496
```
225-
226-
##### ***Rails Assets***
227-
```
228-
gem 'rails-assets-particles.js'
229-
```

‎bower.json

100644100755
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "particles.js",
33
"main": "particles.js",
4-
"version": "2.0.0",
4+
"version": "1.0.4",
55
"homepage": "https://github.com/VincentGarreau/particles.js",
66
"authors": [
77
"Vincent Garreau <vin.garreau@gmail.com>"

‎demo/css/style.css

Lines changed: 6 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -22,75 +22,19 @@ li{list-style:none}
2222
My CSS
2323
========================================================================== */
2424

25-
/* ---- base ---- */
26-
2725
html,body{
2826
width:100%;
2927
height:100%;
3028
background:#111;
3129
}
3230

33-
html{
34-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
35-
}
36-
37-
body{
38-
font:normal 75% Arial, Helvetica, sans-serif;
39-
}
40-
31+
/* remove canvas default margin */
4132
canvas{
42-
display:block;
43-
vertical-align:bottom;
44-
}
45-
46-
47-
/* ---- stats.js ---- */
48-
49-
.count-particles{
50-
background: #000022;
51-
position: absolute;
52-
top: 48px;
53-
left: 0;
54-
width: 80px;
55-
color: #13E8E9;
56-
font-size: .8em;
57-
text-align: left;
58-
text-indent: 4px;
59-
line-height: 14px;
60-
padding-bottom: 2px;
61-
font-family: Helvetica, Arial, sans-serif;
62-
font-weight: bold;
63-
}
64-
65-
.js-count-particles{
66-
font-size: 1.1em;
33+
display:block;
34+
vertical-align:bottom;
6735
}
6836

69-
#stats,
70-
.count-particles{
71-
-webkit-user-select: none;
72-
margin-top: 5px;
73-
margin-left: 5px;
74-
}
75-
76-
#stats{
77-
border-radius: 3px 3px 0 0;
78-
overflow: hidden;
79-
}
80-
81-
.count-particles{
82-
border-radius: 0 0 3px 3px;
83-
}
84-
85-
86-
/* ---- particles.js container ---- */
87-
8837
#particles-js{
89-
width: 100%;
90-
height: 100%;
91-
background-color: #b61924;
92-
background-image: url('');
93-
background-size: cover;
94-
background-position: 50% 50%;
95-
background-repeat: no-repeat;
96-
}
38+
width:100%;
39+
height:100%;
40+
}

0 commit comments

Comments
 (0)