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

1particlesJS('polygon-commonH1',{
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);