SHARE
TWEET

Untitled

a guest Aug 26th, 2019 71 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top