https://librus.co.jp/wp-content/themes/twentynineteen/defo/setting.js

1particlesJS('polygon_area',{
2  "particles":{
3 
4//--シェイプの設定----------
5      "number":{
6        "value":80, //シェイプの数
7        "density":{
8          "enable":true, //シェイプの密集度を変更するか否か
9          "value_area":200 //シェイプの密集度
10        }
11      },
12      "shape":{
13        "type":"circle", //シェイプの形（circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像）
14        "stroke":{
15          "width":0, //シェイプの外線の太さ
16          "color":"#ecf0f5" //シェイプの外線の色
17        },
18        //typeをpolygonにした時の設定
19        "polygon": {
20          "nb_sides": 5 //多角形の角の数
21        },
22        //typeをimageにした時の設定
23        "image": {
24          "src": "images/hoge.png",
25          "width": 100,
26          "height": 100
27        }
28      },
29      "color":{
30        "value":"#e7ecf4" //シェイプの色
31      },
32      "opacity":{
33        "value":1, //シェイプの透明度
34        "random":false, //シェイプの透明度をランダムにするか否か
35        "anim":{
36          "enable":false, //シェイプの透明度をアニメーションさせるか否か
37          "speed":10, //アニメーションのスピード
38          "opacity_min":0.1, //透明度の最小値
39          "sync":false //全てのシェイプを同時にアニメーションさせるか否か
40        }
41      },
42      "size":{
43        "value":5, //シェイプの大きさ
44        "random":true, //シェイプの大きさをランダムにするか否か
45        "anim":{
46          "enable":false, //シェイプの大きさをアニメーションさせるか否か
47          "speed":40, //アニメーションのスピード
48          "size_min":0.1, //大きさの最小値
49          "sync":false //全てのシェイプを同時にアニメーションさせるか否か
50        }
51      },
52//--------------------
53
54//--線の設定----------
55      "line_linked":{
56        "enable":true, //線を表示するか否か
57        "distance":150, //線をつなぐシェイプの間隔
58        "color":"#f0f3f7", //線の色
59        "opacity":0.4, //線の透明度
60        "width":1 //線の太さ
61      },
62//--------------------
63
64//--動きの設定----------
65      "move":{
66        "speed":10, //シェイプの動くスピード
67        "straight":false, //個々のシェイプの動きを止めるか否か
68        "direction":"none", //エリア全体の動き(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-leftより選択)
69        "out_mode":"out" //エリア外に出たシェイプの動き(out、bounceより選択)
70      }
71//--------------------
72
73    },
74 
75    "interactivity":{
76      "detect_on":"canvas",
77      "events":{
78
79//--マウスオーバー時の処理----------
80        "onhover":{
81          "enable":true, //マウスオーバーが有効か否か
82          "mode":"repulse" //マウスオーバー時に発動する動き(下記modes内のgrab、repulse、bubbleより選択)
83        },
84//--------------------
85
86//--クリック時の処理----------
87        "onclick":{
88          "enable":true, //クリックが有効か否か
89          "mode":"push" //クリック時に発動する動き(下記modes内のgrab、repulse、bubble、push、removeより選択)
90        },
91//--------------------
92
93      },
94 
95      "modes":{
96
97//--カーソルとシェイプの間に線が表示される----------
98        "grab":{
99          "distance":400, //カーソルからの反応距離
100          "line_linked":{
101            "opacity":1 //線の透明度
102          }
103        },
104//--------------------
105
106//--シェイプがカーソルから逃げる----------
107        "repulse":{
108          "distance":200 //カーソルからの反応距離
109        },
110//--------------------
111
112//--シェイプが膨らむ----------
113        "bubble":{
114          "distance":400, //カーソルからの反応距離
115          "size":40, //シェイプの膨らむ大きさ
116          "opacity":8, //膨らむシェイプの透明度
117          "duration":2, //膨らむシェイプの持続時間(onclick時のみ)
118          "speed":3 //膨らむシェイプの速度(onclick時のみ)
119        },
120//--------------------
121
122//--シェイプが増える----------
123        "push":{
124          "particles_nb":4 //増えるシェイプの数
125        },
126//--------------------
127
128//--シェイプが減る----------
129        "remove":{
130          "particles_nb":2 //減るシェイプの数
131        }
132//--------------------
133
134      }
135    },
136    "retina_detect":true, //Retina Displayを対応するか否か
137    "resize":true //canvasのサイズ変更にわせて拡大縮小するか否か
138  }
139);
140
141particlesJS('polygon_area02',{
142  "particles":{
143 
144//--シェイプの設定----------
145      "number":{
146        "value":80, //シェイプの数
147        "density":{
148          "enable":true, //シェイプの密集度を変更するか否か
149          "value_area":200 //シェイプの密集度
150        }
151      },
152      "shape":{
153        "type":"circle", //シェイプの形（circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像）
154        "stroke":{
155          "width":0, //シェイプの外線の太さ
156          "color":"#ecf0f5" //シェイプの外線の色
157        },
158        //typeをpolygonにした時の設定
159        "polygon": {
160          "nb_sides": 5 //多角形の角の数
161        },
162        //typeをimageにした時の設定
163        "image": {
164          "src": "images/hoge.png",
165          "width": 100,
166          "height": 100
167        }
168      },
169      "color":{
170        "value":"#e7ecf4" //シェイプの色
171      },
172      "opacity":{
173        "value":1, //シェイプの透明度
174        "random":false, //シェイプの透明度をランダムにするか否か
175        "anim":{
176          "enable":false, //シェイプの透明度をアニメーションさせるか否か
177          "speed":10, //アニメーションのスピード
178          "opacity_min":0.1, //透明度の最小値
179          "sync":false //全てのシェイプを同時にアニメーションさせるか否か
180        }
181      },
182      "size":{
183        "value":5, //シェイプの大きさ
184        "random":true, //シェイプの大きさをランダムにするか否か
185        "anim":{
186          "enable":false, //シェイプの大きさをアニメーションさせるか否か
187          "speed":40, //アニメーションのスピード
188          "size_min":0.1, //大きさの最小値
189          "sync":false //全てのシェイプを同時にアニメーションさせるか否か
190        }
191      },
192//--------------------
193
194//--線の設定----------
195      "line_linked":{
196        "enable":true, //線を表示するか否か
197        "distance":150, //線をつなぐシェイプの間隔
198        "color":"#f0f3f7", //線の色
199        "opacity":0.4, //線の透明度
200        "width":1 //線の太さ
201      },
202//--------------------
203
204//--動きの設定----------
205      "move":{
206        "speed":10, //シェイプの動くスピード
207        "straight":false, //個々のシェイプの動きを止めるか否か
208        "direction":"none", //エリア全体の動き(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-leftより選択)
209        "out_mode":"out" //エリア外に出たシェイプの動き(out、bounceより選択)
210      }
211//--------------------
212
213    },
214 
215    "interactivity":{
216      "detect_on":"canvas",
217      "events":{
218
219//--マウスオーバー時の処理----------
220        "onhover":{
221          "enable":true, //マウスオーバーが有効か否か
222          "mode":"repulse" //マウスオーバー時に発動する動き(下記modes内のgrab、repulse、bubbleより選択)
223        },
224//--------------------
225
226//--クリック時の処理----------
227        "onclick":{
228          "enable":true, //クリックが有効か否か
229          "mode":"push" //クリック時に発動する動き(下記modes内のgrab、repulse、bubble、push、removeより選択)
230        },
231//--------------------
232
233      },
234 
235      "modes":{
236
237//--カーソルとシェイプの間に線が表示される----------
238        "grab":{
239          "distance":400, //カーソルからの反応距離
240          "line_linked":{
241            "opacity":1 //線の透明度
242          }
243        },
244//--------------------
245
246//--シェイプがカーソルから逃げる----------
247        "repulse":{
248          "distance":200 //カーソルからの反応距離
249        },
250//--------------------
251
252//--シェイプが膨らむ----------
253        "bubble":{
254          "distance":400, //カーソルからの反応距離
255          "size":40, //シェイプの膨らむ大きさ
256          "opacity":8, //膨らむシェイプの透明度
257          "duration":2, //膨らむシェイプの持続時間(onclick時のみ)
258          "speed":3 //膨らむシェイプの速度(onclick時のみ)
259        },
260//--------------------
261
262//--シェイプが増える----------
263        "push":{
264          "particles_nb":4 //増えるシェイプの数
265        },
266//--------------------
267
268//--シェイプが減る----------
269        "remove":{
270          "particles_nb":2 //減るシェイプの数
271        }
272//--------------------
273
274      }
275    },
276    "retina_detect":true, //Retina Displayを対応するか否か
277    "resize":true //canvasのサイズ変更にわせて拡大縮小するか否か
278  }
279);