粒子が動いているような3Dアニメーションを描画出来るJSライブラリ「JParticles 」

粒子が動いているような3D particleアニメーションを作成できるJSライブラリ「JParticles」の紹介です。

Webページにアニメーションをレンダリングするライブラリは沢山存在しますが、
中でも印象に残りそうなアニメーションの１つが「Particle」です。

 上記の様なアニメーションを描画するライブラリは「particles.js」が有名ですが、
細かい描画が出来る分、多くの *オプション を指定する必要があります。
( * 外部jsonファイルでも可 )

 そんなParticleアニメーションを
簡単に使えるようにされた Javascriptライブラリが「JParticles」です。
 

- CanvasでレンダリングされたParticleアニメーションが簡単に作成・実装できる

* 対応ブラウザ
- IE 9+
- Safari 6+
- Opera 15+
- Firefox 21+
- Google Chrome 23+

 JParticlesの入手はこちらのGitHubレポジトリページからライブラリを直接入手する他、
npm や yarn などのパッケージマネージャーを使ってダウンロードできます。

# npm を使ってインストールする場合
npm install jparticles --save
# yarnを使ってインストールする場合
yarn add jparticles
# CDN
https://unpkg.com/jparticles/production/jparticles.all.js

// ES6シンタックスでモジュールを呼び出す場合
import JParticles from 'jparticles';
// ブラウザ上で呼び出す場合
<script src="JParticles-master/production/jparticles.all.js"></script>

 JParticlesの使い方は簡単で、アニメーションを描画する要素を指定するだけで使えます。

// HTMLのid='anime'にアニメーションを展開
new JParticles.particle('#anime');

第二引数にオブジェクトを渡すことで、
色の変更や アニメーションの幅など、各種設定が可能になります。

new JParticles.particle('#test', {
    proximity: 100, // オブジェクト同士の近さ
    color: 'gray', // アニメーションの色 * CSSのhexも可
    // color: ['green', 'red'], // 配列にすることで複数色も可能
    lineShape: 'spider',
    range: 800 // アニメーションの幅
});

* 用意されているオプション
- num [ int ] ( particleの値 [粒の数] )
- maxR [int] ( オブジェクトの円の最大値 )
- maxR [int] ( オブジェクトの円の最小値 )
- maxSpeed [int] ( オブジェクトの速さ *最大 )
- minSpeed [int] ( オブジェクトの速さ *最小 )
- proximity [int] ( オブジェクト同士の感覚 )
- range [int] ( オブジェクト同士の幅 )
- lineWidth [int] ( ラインオブジェクトの横幅 )
- lineShape [String] ( spider 又は cube ) オブジェクトの形
- eventElem [null 又は 要素名 ] ( デフォルトではCanvasで描画されますが 要素を指定してDOMレンダリングも可能 )
- parallax [ true 又は false ] (このオプションがtrueだと マウスホバーするとアニメーションも連動します)

以上が JParticles の紹介でした。

 JParticlesを使うとアニメーションを描画する要素と、
わずかなオプションだでParticleアニメーションが手軽に実装でます。

また、IE9からサポートされているので ブラウザの問題をあまり気にせず使えそうですね！

GitHub : Barrior/JParticles ( 公式ページ )