https://lingyuzhao.top/particles.js-2.0.0/demo/js/app.js

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