【44：particles.js】幾何学的なアニメーションを表現する

f:id:seintoseiya:20151214234112p:plain
プロジェクトNo.44：particles.js - DEMO

日々、色んなライブラリが出てきて、作ってる人ってすげーなーと思いながら、
私はいつもありがたく利用させてもらっています。
たまには作る側に回ってもいいけど、やっぱり色んなライブラリを触れておく事でいざという時に１から作らなくても済みます。
今回もすごく簡単に幾何学的なアニメーションを表現できるライブラリをご紹介します。

ライブラリをダウンロード

以下の公式サイトからライブラリファイルをダウンロードします。
particles.js - A lightweight JavaScript library for creating particles

デモも含まれているので色々パラメータをいじってみてください。

使い方

ダウンロードしたファイルの中で使うのはparticles.jsまたはparticles.min.jsです。

用意するファイルは以下の通り。

index.html
style.css
setting.js
particles.js

index.html

アニメーションを表示する領域の確保とJS等の読み込みを行います。

<!DOCTYPE html>
<html>
<head>
<title>particles.js</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="hoge"></div>
 
<script src="js/particles.js"></script>
<script src="js/setting.js"></script>
</body>
</html>

の部分に対して、後でsetting.jsから設定していきます。

style.css

hoge領域のスタイル設定。

@charset "utf-8";
#hoge{
  width:1000px;
  height:500px;
  margin:0 auto;
  background-color:#773973;
}

setting.js

アニメーションの細かい設定をこのファイルでしていきます。

particlesJS('hoge',{
  // シェイプの設定
  "particles": {
    "number": {
      "value": 50,
      "density": {
        "enable": true,
        "value_area": 600
      }
    },
    "color": {
      "value":["#ffff00","#00ffff","#ff00ff"]
    },
    "shape": {
      "type": ["circle", "triangle", "edge"],
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 20,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 5,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 200,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 5
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  // 各操作に関する設定
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 100,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

基本的な文法はこんな感じです。

particlesJS('hoge',{
  // json形式でオプションを記述していく
});

オプションはGithubに載っていますので色々試してみてください。
GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles

あんまり、シェイプの数を増やしすぎたり、速度を上げすぎたりすると、
お使いのPCによっては処理落ちするので、そこらへんも考慮して実装してください。
使い所が難しいですが、インパクトのあるWebサイトが作れそうですね。

参考サイト

particles.jsを使って簡単に幾何学的なアニメーションを作る | 株式会社LIG

GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles

全ソースはこちら

github.com

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。