Guest User

Untitled

a guest
Aug 26th, 2019
82
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. particlesJS('particles',{
  2. "particles":{
  3.  
  4. //--シェイプの設定----------
  5. "number":{
  6. "value":30, //シェイプの数
  7. "density":{
  8. "enable":true, //シェイプの密集度を変更するか否か
  9. "value_area":200 //シェイプの密集度
  10. }
  11. },
  12. "shape":{
  13. "type":"star", //シェイプの形(circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像)
  14. "stroke":{
  15. "width":1, //シェイプの外線の太さ
  16. "color":"#5734a9" //シェイプの外線の色
  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":"#ffffff" //シェイプの色
  31. },
  32. "opacity":{
  33. "value":1, //シェイプの透明度
  34. "random":false, //シェイプの透明度をランダムにするか否か
  35. "anim":{
  36. "enable":false, //シェイプの透明度をアニメーションさせるか否か
  37. "speed":1, //アニメーションのスピード
  38. "opacity_min":0.1, //透明度の最小値
  39. "sync":false //全てのシェイプを同時にアニメーションさせるか否か
  40. }
  41. },
  42. "size":{
  43. "value":1, //シェイプの大きさ
  44. "random":true, //シェイプの大きさをランダムにするか否か
  45. "anim":{
  46. "enable":false, //シェイプの大きさをアニメーションさせるか否か
  47. "speed":1, //アニメーションのスピード
  48. "size_min":0.1, //大きさの最小値
  49. "sync":false //全てのシェイプを同時にアニメーションさせるか否か
  50. }
  51. },
  52. //--------------------
  53.  
  54. //--線の設定----------
  55. "line_linked":{
  56. "enable":true, //線を表示するか否か
  57. "distance":150, //線をつなぐシェイプの間隔
  58. "color":"#ffffff", //線の色
  59. "opacity":0.4, //線の透明度
  60. "width":2 //線の太さ
  61. },
  62. //--------------------
  63.  
  64. //--動きの設定----------
  65. "move":{
  66. "speed":8, //シェイプの動くスピード
  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":false, //マウスオーバーが有効か否か
  82. "mode":"repulse" //マウスオーバー時に発動する動き(下記modes内のgrab、repulse、bubbleより選択)
  83. },
  84. //--------------------
  85.  
  86. //--クリック時の処理----------
  87. "onclick":{
  88. "enable":false, //クリックが有効か否か
  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. );
RAW Paste Data