Skip to content

Commit ca71361

Browse files
VincentGarreauVincentGarreau
committed
Merge branch 'dev'
2 parents 80239f6 + 873c7bf commit ca71361

File tree

8 files changed

+1716
-479
lines changed

8 files changed

+1716
-479
lines changed

‎README.md

Lines changed: 174 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,82 +15,198 @@ Load particles.js and configure the particles:
1515

1616
**app.js**
1717
```javascript
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] */
18+
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
19+
particlesJS.load('particles-js', 'assets/particles.json', function() {
20+
console.log('callback - particles-js config loaded');
21+
});
22+
```
2123

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
24+
**particles.json**
25+
```javascript
26+
{
27+
"particles": {
28+
"number": {
29+
"value": 80,
30+
"density": {
31+
"enable": true,
32+
"value_area": 800
33+
}
34+
},
35+
"color": {
36+
"value": "#ffffff"
37+
},
38+
"shape": {
39+
"type": "circle",
40+
"stroke": {
41+
"width": 0,
42+
"color": "#000000"
43+
},
44+
"polygon": {
45+
"nb_sides": 5
46+
},
47+
"image": {
48+
"src": "img/github.svg",
49+
"width": 100,
50+
"height": 100
51+
}
52+
},
53+
"opacity": {
54+
"value": 0.5,
55+
"random": false,
56+
"anim": {
57+
"enable": false,
58+
"speed": 1,
59+
"opacity_min": 0.1,
60+
"sync": false
3561
}
3662
},
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
63+
"size": {
64+
"value": 10,
65+
"random": true,
66+
"anim": {
67+
"enable": false,
68+
"speed": 80,
69+
"size_min": 0.1,
70+
"sync": false
5071
}
5172
},
52-
anim: {
53-
enable: true,
54-
speed: 1
73+
"line_linked": {
74+
"enable": true,
75+
"distance": 300,
76+
"color": "#ffffff",
77+
"opacity": 0.4,
78+
"width": 2
79+
},
80+
"move": {
81+
"enable": true,
82+
"speed": 12,
83+
"direction": "none",
84+
"random": false,
85+
"straight": false,
86+
"out_mode": "out",
87+
"bounce": false,
88+
"attract": {
89+
"enable": false,
90+
"rotateX": 600,
91+
"rotateY": 1200
92+
}
5593
}
5694
},
57-
interactivity: {
58-
enable: true,
59-
mouse: {
60-
distance: 300
61-
},
62-
detect_on: 'canvas', // "canvas" or "window"
63-
mode: 'grab', // "grab" of false
64-
line_linked: {
65-
opacity: .5
95+
"interactivity": {
96+
"detect_on": "canvas",
97+
"events": {
98+
"onhover": {
99+
"enable": false,
100+
"mode": "repulse"
101+
},
102+
"onclick": {
103+
"enable": true,
104+
"mode": "push"
105+
},
106+
"resize": true
66107
},
67-
events: {
68-
onclick: {
69-
enable: true,
70-
mode: 'push', // "push" or "remove"
71-
nb: 4
108+
"modes": {
109+
"grab": {
110+
"distance": 800,
111+
"line_linked": {
112+
"opacity": 1
113+
}
114+
},
115+
"bubble": {
116+
"distance": 800,
117+
"size": 80,
118+
"duration": 2,
119+
"opacity": 8,
120+
"speed": 3
121+
},
122+
"repulse": {
123+
"distance": 400,
124+
"duration": 0.4
125+
},
126+
"push": {
127+
"particles_nb": 4
72128
},
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
129+
"remove": {
130+
"particles_nb": 2
78131
}
79132
}
80133
},
81-
/* Retina Display Support */
82-
retina_detect: true
83-
});
134+
"retina_detect": true
135+
}
84136
```
137+
85138
-------------------------------
86-
### ***Live Demo***
87-
<a href="http://codepen.io/VincentGarreau/pen/pnlso" target="_blank">CodePen demo</a>
88139

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

91200
-------------------------------
92201

93-
##### ***Install with Bower***
202+
### `Packages install`
203+
204+
##### ***Bower***
94205
```
95206
bower install particles.js --save
96207
```
208+
209+
##### ***Rails Assets***
210+
```
211+
gem 'rails-assets-particles.js'
212+
```

‎bower.json

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": "1.1.0",
4+
"version": "2.0.0",
55
"homepage": "https://github.com/VincentGarreau/particles.js",
66
"authors": [
77
"Vincent Garreau <vin.garreau@gmail.com>"

‎demo/css/style.css

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

25+
/* ---- base ---- */
26+
2527
html,body{
2628
width:100%;
2729
height:100%;
2830
background:#111;
2931
}
3032

31-
/* remove canvas default margin */
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+
3241
canvas{
33-
display:block;
34-
vertical-align:bottom;
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;
3567
}
3668

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+
3788
#particles-js{
38-
width:100%;
39-
height:100%;
40-
}
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+
}

0 commit comments

Comments
 (0)