webサイトなどで遺伝子配列みたいな動的なデザインを見かけたことはないでしょうか。
あれは、パーティクルと呼ばれるものです。
パーティクル・システム（英: particle system）はコンピュータグラフィック技術のひとつで、従来型のレンダリング技術では再現が難しい、ある種の曖昧さを持った事物をシミュレートするために使われる。一般にパーティクル・システムを使って模写される事物の例としては、炎、爆発、煙、流水、火花、落葉、雲、霧、雪、埃、流星、毛髪、毛皮、草地、あるいは光跡や呪文の視覚効果などが挙げられる。
【出典：パーティクル・システム – wikipedia】
見ていると視覚的に特徴のあるデザインなので、web制作に取り入れたい！と思うこともあるかと思います。
今回は、簡単にそのパーティクルが実装できる「particleground」をご紹介します。
particlegroundは、jQueryを利用して実装することもできますが、単体でも動作可能なプラグインになります。
今回ご紹介するのはjQeuryプラグインを利用した「particleground」に解説になります。
この記事の目次
導入方法
公式サイトよりダウンロード
まずは、事前の準備としてGitHubからjs等のファイルをダウンロードしましょう。
公式サイト
ダウンロードしたZIPファイルを解凍して、お使いのサーバーにFTPソフトを利用してアップロードしてください。
HTMLやjQuery の記述
以下の通りに、jQuery、particlegroundの呼び出しと、particlegroundの実行を行いましょう。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://nkmrkisk.com/demo/2016/1/js/jquery.particleground.min.js"></script>
<script>
$(function(){
$('#your-element').particleground();
})
</script>
<div id="your-element"></div>
jQueryは、googleにホストされたjQueryバージョン1.11.0を呼び出しています。
必ず、「jQuery > particlegroundのプラグイン > particleground実行コード」の順で記述してください。順番が間違ってしまうとエラーが起こり正常通り動きません。
完成！
See the Pen [jQuery]PARTICLEGROUNDアニメーションするパーティクルを実装できる by nkmrkisk (@rekid) on CodePen.
以上で完成です。あとは、自由にオプション（下記参照）を変更などして、好きなようにデザインを変えてみてくださいね！
オプション一覧
particlegroundでは、様々なオプションを設定することができます。
どのような変更ができるかを見ていきましょう。
と、その前にオプションの設定方法は下記になります。
$('#your-element').particleground({
maxSpeedY: 0.7,
dotColor: '#666666'
});
minSpeedX x軸の最低移動速度
デフォルト（0.1）x軸の最低移動速度になります。値が大きいほどx軸の移動速後が早くなります。maxSpeedXとの乖離が大きいほど、速度の緩急が大きくなります。
maxSpeedX x軸の最高移動速度
デフォルト（0.7）x軸の最高移動速度になります。値が大きいほどx軸の移動速後が早くなります。minSpeedXとの乖離が大きいほど、速度の緩急が大きくなります。
minSpeedY x軸の最低移動速度
デフォルト（0.1）x軸の最低移動速度になります。値が大きいほどx軸の移動速後が早くなります。maxSpeedYとの乖離が大きいほど、速度の緩急が大きくなります。
maxSpeedY x軸の最高移動速度
デフォルト（0.7）x軸の最高移動速度になります。値が大きいほどx軸の移動速後が早くなります。minSpeedYとの乖離が大きいほど、速度の緩急が大きくなります。
directionX x軸のドットの指向性
デフォルト（center）ドットの大まかな方向になります。指定できる値は「center , left , right」です。centerでは、だいたいx軸のどちらにもバラけます。
directionY y軸のドットの指向性
デフォルト（center）ドットの大まかな方向になります。指定できる値は「center , up , down」です。centerでは、だいたいx軸のどちらにもバラけます。
density 表示されるドット数
デフォルト（10000）表示されるドットの数に影響します。数値が小さいほどドットが多くなり、逆に数値が大きいほどドットの数が少なくなります。
dotColor ドットのカラー
デフォルト（#666666）ドットのカラーになります。
lineColor ラインのカラー
デフォルト（#666666）ラインのカラーになります。
particleRadius ドットのサイズ
デフォルト（7）ドットのサイズに影響します。数が大きいほどドットが大きくなり、逆に数値が小さいほどドットのサイズも小さくなります。
lineWidth ラインのサイズ
デフォルト（1）ラインのサイズに影響します。数が大きいほどラインが太くなり、逆に数値が小さいほどラインのサイズも細くなります。
curvedLines ラインを曲線可否
デフォルト（false）ラインを曲線にするか、直線にするかの指定ができます。（true , false）
proximity ドット間のライン設定
デフォルト（100）ドット同士の間に出来るラインの発生条件の設定ができます。数値が小さいほどドットが近づかないとラインが発生しなくなり、逆に数値が大きいと、遠い距離でもドット同士の間にラインが発生します。
parallax マウス反応設定
デフォルト（true）マウスの位置に反応して挙動するかどうかの設定ができます。（true , false）
parallaxMultiplier マウス反応の影響度設定
デフォルト（5）parallax : true 時の挙動の大きさの設定ができます。値が小さいほどドットがマウスに反応して大きく動き、逆に数値が小さいほどマウスポインタからの影響を受けづらくなります。
遊んでみた
See the Pen [jQuery]PARTICLEGROUNDアニメーションするパーティクルを実装できるvar2 by nkmrkisk (@rekid) on CodePen.
おわりに
個人的に気に入っているプラグインです。