particles.jsを使って幾何学的なアニメーションを実装する方法

皆さん一度は見たことがあるかもしれませんが、粒子と線が繋がって動いていて、マウスオーバーすると逃げるようにその粒子が動く何とも幾何学的なアニメーションです。

あれはparticles.jsというプラグインを使うことで実装できます。

 

particles.jsの実装方法

まずは以下のサイトからparticles.jsをダウンロードします。

http://vincentgarreau.com/particles.js/

 

ダウンロードしたファイルで使用するのはparticles.min.jsのみです。

次に実装するjsファイルを作成します。

適当なjsファイルを作って、以下のコードをコピペしてください。今回はファイル名はsettings.jsとしておきます。

particlesJS('hoge',{
  "particles":{
 
//--シェイプの設定----------
      "number":{
        "value":80, //シェイプの数
        "density":{
          "enable":true, //シェイプの密集度を変更するか否か
          "value_area":200 //シェイプの密集度
        }
      },
      "shape":{
        "type":"circle", //シェイプの形(circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像)
        "stroke":{
          "width":0, //シェイプの外線の太さ
          "color":"#ffcc00" //シェイプの外線の色
        },
        //typeをpolygonにした時の設定
        "polygon": {
          "nb_sides": 5 //多角形の角の数
        },
        //typeをimageにした時の設定
        "image": {
          "src": "images/hoge.png",
          "width": 100,
          "height": 100
        }
      },
      "color":{
        "value":"#ffffff" //シェイプの色
      },
      "opacity":{
        "value":1, //シェイプの透明度
        "random":false, //シェイプの透明度をランダムにするか否か
        "anim":{
          "enable":false, //シェイプの透明度をアニメーションさせるか否か
          "speed":10, //アニメーションのスピード
          "opacity_min":0.1, //透明度の最小値
          "sync":false //全てのシェイプを同時にアニメーションさせるか否か
        }
      },
      "size":{
        "value":5, //シェイプの大きさ
        "random":true, //シェイプの大きさをランダムにするか否か
        "anim":{
          "enable":false, //シェイプの大きさをアニメーションさせるか否か
          "speed":40, //アニメーションのスピード
          "size_min":0.1, //大きさの最小値
          "sync":false //全てのシェイプを同時にアニメーションさせるか否か
        }
      },
//--------------------

//--線の設定----------
      "line_linked":{
        "enable":true, //線を表示するか否か
        "distance":150, //線をつなぐシェイプの間隔
        "color":"#ffffff", //線の色
        "opacity":0.4, //線の透明度
        "width":1 //線の太さ
      },
//--------------------

//--動きの設定----------
      "move":{
        "speed":10, //シェイプの動くスピード
        "straight":false, //個々のシェイプの動きを止めるか否か
        "direction":"none", //エリア全体の動き(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-leftより選択)
        "out_mode":"out" //エリア外に出たシェイプの動き(out、bounceより選択)
      }
//--------------------

    },
 
    "interactivity":{
      "detect_on":"canvas",
      "events":{

//--マウスオーバー時の処理----------
        "onhover":{
          "enable":true, //マウスオーバーが有効か否か
          "mode":"repulse" //マウスオーバー時に発動する動き(下記modes内のgrab、repulse、bubbleより選択)
        },
//--------------------

//--クリック時の処理----------
        "onclick":{
          "enable":true, //クリックが有効か否か
          "mode":"push" //クリック時に発動する動き(下記modes内のgrab、repulse、bubble、push、removeより選択)
        },
//--------------------

      },
 
      "modes":{

//--カーソルとシェイプの間に線が表示される----------
        "grab":{
          "distance":400, //カーソルからの反応距離
          "line_linked":{
            "opacity":1 //線の透明度
          }
        },
//--------------------

//--シェイプがカーソルから逃げる----------
        "repulse":{
          "distance":200 //カーソルからの反応距離
        },
//--------------------

//--シェイプが膨らむ----------
        "bubble":{
          "distance":400, //カーソルからの反応距離
          "size":40, //シェイプの膨らむ大きさ
          "opacity":8, //膨らむシェイプの透明度
          "duration":2, //膨らむシェイプの持続時間(onclick時のみ)
          "speed":3 //膨らむシェイプの速度(onclick時のみ)
        },
//--------------------

//--シェイプが増える----------
        "push":{
          "particles_nb":4 //増えるシェイプの数
        },
//--------------------

//--シェイプが減る----------
        "remove":{
          "particles_nb":2 //減るシェイプの数
        }
//--------------------

      }
    },
    "retina_detect":true, //Retina Displayを対応するか否か
    "resize":true //canvasのサイズ変更にわせて拡大縮小するか否か
  }
);

 

また、settings.jsに書いてある内容はparticles.js公式ページからもダウンロードできます。

書いてある内容は大体同じなので安心してください。

 

ここまででjsファイルを2つ準備しました。

あとはCSSでレイアウトを整えたり、HTMLで描画する場所を作るだけです。

HTMLではparticles.jsを読み込むようにスクリプトを実行しておきます。

HTML

<div id="hoge"></div>

<script src="particles.js"></script>
<script src="setting.js"></script>

 

CSSはHTMLで描画する場所のスタイルを指定しましょう。

背景色を付けておくとparticles.jsの動きがわかりやすくなります。

CSS

#hoge{
  width:1000px;
  height:500px;
  margin:0 auto;
  background-color:#000;
}

 

カスタマイズ

particles.jsにはカスタマイズ要素がたくさん用意されています。

 

マウスオーバー処理

マウスオーバー処理をカスタマイズしてみます。

settings.jsの以下の部分を編集します。

//--マウスオーバー時の処理----------
        "onhover":{
          "enable":true, //マウスオーバーが有効か否か
          "mode":"repulse" //マウスオーバー時に発動する動き(下記modes内のgrab、repulse、bubbleより選択)
        },
//--------------------

 

enableをfalseにするとマウスオーバーの処理が無くなります。

modeはgrab、repulse、bubbleの3つから選択できます。内容は以下の通り。

  • grab:カーソルとシェイプの間に線が表示される
  • repulse:シェイプがカーソルから逃げる
  • bubble:シェイプが膨らむ

 

初期設定ではrepulseになっています。

例として、マウスオーバーした時にシェイプが膨らむようにしたい場合は以下のように変更しましょう。

//--マウスオーバー時の処理----------
        "onhover":{
          "enable":true, //マウスオーバーが有効か否か
          "mode":"bubble" //マウスオーバー時に発動する動き
        },
//--------------------

 

クリック処理

クリック時の処理もマウスオーバー処理と要領はほぼ同じです。

settings.jsの以下の部分を編集すると処理を変更できます。

//--クリック時の処理----------
        "onclick":{
          "enable":true, //クリックが有効か否か
          "mode":"push" //クリック時に発動する動き
        },
//--------------------

 

modeには5種類あり、以下から選択できます。

  • grab:カーソルとシェイプの間に線が表示される
  • repulse:シェイプがカーソルから逃げる
  • bubble:シェイプが膨らむ
  • push:シェイプが増える
  • remove:シェイプが減る

 

マウスオーバー時にはなかったpushとremoveという処理が使えます。

 

まとめ

particles.jsはsettings.jsがほぼデフォルトでもかなりかっこいい動きをしてくれますが、カスタマイズすることでさらにサイトに合うように調整できそうです。

幻想的な雰囲気を出したいサイトや、宇宙のような雰囲気を出したいサイトには最適でしょう。

ただし、処理がそれなりに重いので導入する際は検討してから入れたほうがいいですね。