1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
| /* -----------------------------------------------
| /* How to use? : Check the GitHub README
| /* ----------------------------------------------- */
|
| /* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
| /*
| particlesJS.load('particles-js', 'particles.json', function() {
| console.log('particles.js loaded - callback');
| });
| */
| /** **/
| /* Otherwise just put the config content (json): */
|
| particlesJS('particles-js',
|
| {
| "particles": {
| "number": {
| "value": 10,
| "density": {
| "enable": true,
| "value_area": 1200
| }
| },
| "color": {
| "value": "#ffffff"
| },
| "shape": {
| "type": "circle",
| "stroke": {
| "width": 2,
| "color": "#000000"
| },
| "polygon": {
| "nb_sides": 5
| },
| "image": {
| "src": "img/github.svg",
| "width": 100,
| "height": 100
| }
| },
| "opacity": {
| "value": .8,
| "random": false,
| "anim": {
| "enable": false,
| "speed": 1,
| "opacity_min": 0.1,
| "sync": false
| }
| },
| "size": {
| "value": 5,
| "random": true,
| "anim": {
| "enable": false,
| "speed": 40,
| "size_min": 0.1,
| "sync": false
| }
| },
| "line_linked": {
| "enable": true,
| "distance": 150,
| "color": "#ffffff",
| "opacity": 0.4,
| "width": 1
| },
| "move": {
| "enable": true,
| "speed": 6,
| "direction": "none",
| "random": false,
| "straight": false,
| "out_mode": "out",
| "attract": {
| "enable": false,
| "rotateX": 600,
| "rotateY": 1200
| }
| }
| },
| "interactivity": {
| "detect_on": "canvas",
| "events": {
| "onhover": {
| "enable": true,
| "mode": "repulse"
| },
| "onclick": {
| "enable": true,
| "mode": "push"
| },
| "resize": true
| },
| "modes": {
| "grab": {
| "distance": 400,
| "line_linked": {
| "opacity": 1
| }
| },
| "bubble": {
| "distance": 400,
| "size": 40,
| "duration": 2,
| "opacity": 8,
| "speed": 3
| },
| "repulse": {
| "distance": 200
| },
| "push": {
| "particles_nb": 4
| },
| "remove": {
| "particles_nb": 2
| }
| }
| },
| "retina_detect": true,
| "config_demo": {
| "hide_card": false,
| "background_color": "#b61924",
| "background_image": "",
| "background_position": "50% 50%",
| "background_repeat": "no-repeat",
| "background_size": "cover"
| }
| }
|
| );
|
|
