memorandum

備忘録

2018.04.19

背景に幾何学的なアニメーションを表示する

以前、本サイトでも使用していたが、幾何学的アニメーションを表示する「particles.js」の設置の仕方。

本体は公式サイトおよびGitHubよりダウンロードする。

ダウンロードした「particles.js」もしくは「particles.min.js」を適当な箇所で読み込み
幾何学的アニメーションを表示するための要素を挿入する。

さらに、画面いっぱいに表示されるようにCSSで設定をする。

#particles-js {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

次は、起動させるための設定を行う。
適当な名前を付けたjsに以下のコードを記述して、先程読み込ませた「particles.js」の次に読み込ませる。

particlesJS('particles-js', {
  "particles": {
    "number": {
      "value": 80, //シェイプの数
      "density": {
        "enable": true,  //シェイプ密集度の可否
        "value_area": 800 //シェイプの密集度
      }
    },
    "color": {
      "value": "#ffffff" //シェイプの色
    },
    "shape": {
      "type": "circle", //シェイプの形(circle:丸、edge:四角、triangle:三角、polygon:多角形、star:星型、image:画像)
      "stroke": {
        "width": 0, //シェイプの線の太さ
        "color": "#000000" //シェイプの線の色
      },
      "polygon": {
        "nb_sides": 5 //多角形の角の数
      },
      "image": {
        "src": "img/github.svg", //imageのパス
        "width": 100, //imageの幅
        "height": 100 //imageの高さ
      }
    },
    "opacity": {
      "value": 0.5, //シェイプの透明度
      "random": false, //シェイプ透明度のランダムの可否
      "anim": {
        "enable": false, //シェイプ透明度のアニメーション可否
        "speed": 1, //アニメーションの速度
        "opacity_min": 0.1, //透明度の最小値
        "sync": false //全てのシェイプを同時にアニメーションさせるか
      }
    },
    "size": {
      "value": 10, //シェイプの大きさ
      "random": true, //シェイプの大きさをランダムにするか
      "anim": {
        "enable": false, //シェイプの大きさをアニメーションさせるか
        "speed": 80, //アニメーションの速度
        "size_min": 0.1, //サイズの最小値
        "sync": false //全てのシェイプを同時にアニメーションさせるか
      }
    },
    "line_linked": {
      "enable": true, //線を表示するか
      "distance": 300, //線をつなぐシェイプの間隔
      "color": "#ffffff", //線の色
      "opacity": 0.4, //線の透明度
      "width": 2 //線の太さ
    },
    "move": {
      "enable": true, //シェイプを動かせるか
      "speed": 12, //シェイプの動くスピード
      "direction": "none", //エリア全体の動き(none、top、top-right、right、bottom-right、bottom、bottom-left、left、top-leftより選択)
      "random": false, //シェイプの動きをランダムにするか
      "straight": false, //個々のシェイプの動きを止めるか
      "out_mode": "out", //bounce:ボックス内で動かす,out:ボックス外に逃がす
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": { //マウスイベント設定
      "onhover": { //マウスオーバー時
        "enable": false, //有効の可否
        "mode": "repulse" //grad:付近のシェイプと線を繋ぐ, bubble:拡大, repulse:拒絶
      },
      "onclick": { //クリック時
        "enable": true, //有効の可否
        "mode": "push" //push:追加, remove:削除, bubble:拡大, repulse:拒絶
      },
      "resize": true //canvasのサイズ変更にわせて拡大縮小するか
    },
    "modes": { //マウスイベント発生時の詳細値を設定
      "grab": {
        "distance": 800, //カーソルからの反応距離
        "line_linked": {
          "opacity": 1 //線の透明度
        }
      },
      "bubble": {
        "distance": 800, //カーソルからの反応距離
        "size": 80, //シェイプの膨らむ大きさ
        "duration": 2, //膨らむシェイプの持続時間
        "opacity": 0.8, //膨らむシェイプの透明度
        "speed": 3 //膨らむシェイプのスピード
      },
      "repulse": {
        "distance": 400, //カーソルからの反応距離
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4 //増えるシェイプの数
      },
      "remove": {
        "particles_nb": 2 //減るシェイプの数
      }
    }
  },
  "retina_detect": true //Retina Displayを対応するか
});
MAIL制作・お見積りのご依頼
ご相談・お問い合わせ