xxxxxxxxxx
1
<div class="mdb-color intro" id="particles-js"></div>
xxxxxxxxxx
1
.intro {
2
height: 100vh;
3
}
xxxxxxxxxx
1
2
particlesJS("particles-js", {
3
"particles": {
4
"number": {
5
"value": 180,
6
"density": {
7
"enable": true,
8
"value_area": 800
9
}
10
},
11
"color": {
12
"value": "#ffffff"
13
},
14
"shape": {
15
"type": "circle",
16
"stroke": {
17
"width": 0,
18
"color": "#000000"
19
},
20
"polygon": {
21
"nb_sides": 5
22
},
23
"image": {
24
"src": "img/github.svg",
25
"width": 100,
26
"height": 100
27
}
28
},
29
"opacity": {
30
"value": 0.5,
31
"random": false,
32
"anim": {
33
"enable": false,
34
"speed": 1,
35
"opacity_min": 0.1,
36
"sync": false
37
}
38
},
39
"size": {
40
"value": 3,
41
"random": true,
42
"anim": {
43
"enable": false,
44
"speed": 40,
45
"size_min": 0.1,
46
"sync": false
47
}
48
},
49
"line_linked": {
50
"enable": true,
51
"distance": 150,
52
"color": "#ffffff",
53
"opacity": 0.4,
54
"width": 1
55
},
56
"move": {
57
"enable": true,
58
"speed": 6,
59
"direction": "none",
60
"random": false,
61
"straight": false,
62
"out_mode": "out",
63
"bounce": false,
64
"attract": {
65
"enable": false,
66
"rotateX": 600,
67
"rotateY": 1200
68
}
69
}
70
},
71
"interactivity": {
72
"detect_on": "canvas",
73
"events": {
74
"onhover": {
75
"enable": true,
76
"mode": "grab"
77
},
78
"onclick": {
79
"enable": true,
80
"mode": "push"
81
},
82
"resize": true
83
},
84
"modes": {
85
"grab": {
86
"distance": 140,
87
"line_linked": {
88
"opacity": 1
89
}
90
},
91
"bubble": {
92
"distance": 400,
93
"size": 40,
94
"duration": 2,
95
"opacity": 8,
96
"speed": 3
97
},
98
"repulse": {
99
"distance": 200,
100
"duration": 0.4
101
},
102
"push": {
103
"particles_nb": 4
104
},
105
"remove": {
106
"particles_nb": 2
107
}
108
}
109
},
110
"retina_detect": true
111
});
112
Console errors: 0