サイトで何かインパクトほしい時に使えそうなParticlegroundの使い方備忘録です。

最近よく見かけるようになった分子的な形状のアニメーション。
ちょっとしたインパクトになりそうなので試してみました。

particlegroundというプラグインです

particleground

まずは、particlegroundのサイトのダウンロードボタンをクリックし、
ファイル一式を開きます。

読み込み

ダウンロードしたファイル内のjquery.particleground.min.jsを読み込みます。

<script type='text/javascript' src='js/jquery.particleground.min.js'></script>

HTML

表示させたいエリアを囲むタグにidやクラスをつけます。

<div id="particles">

jQuery

jQueryで以下を書き足します

$('#particles').particleground({
	dotColor: '#bcbcbc', //ドットの色
	lineColor: '#bcbcbc', //線の色
	particleRadius: 5 //ドットの大きさ
});

色やドットの大きさの調整ができます。

以上で、終わりです。めっちゃ簡単。

オプション

オプションを指定すれば、簡単にカスタマイズができます。

$('#particles').particleground({
    //ドットの色
    dotColor: '#bcbcbc',
    //ドットの大きさ
    particleRadius: 5,
    //線の色
    lineColor: '#bcbcbc',
    //線の太さ
    lineWidth: 1,
    //ドットをつなぐ線の種類を指定。trueにすることで曲線に
    curvedLines: false,
    //ドット同士が、どのくらい近づいたら線で結ぶかをpx数で指定。
    proximity: 100,
    //ドットの、X軸（横）移動の移動時間の最小時間を指定
    minSpeedX: 0.1,
    //ドットの、X軸（横）移動の移動時間の最大時間を指定
    maxSpeedX: 0.7,
    //ドットの、Y軸（縦）移動の移動時間の最小時間を指定
    minSpeedY: 0.1,
    //ドットの、Y軸（縦）移動の移動時間の最大時間を指定
    maxSpeedY: 0.7,
    //X軸（横）のドットが流れていく方向の指定。"center"、"left"、"right"から選択
    directionX: "center",
    //Y軸（横）のドットが流れていく方向の指定。"center"、"up"、"bottom"から選択
    directionY: "center",
    //ドットの密度を指定。数値が少ないほど、密度が濃くなります。
    density: 10000,
    //生成されるparticleの密度を指定します。数値が少ないほど、密度が濃くなります。
    minSpeedX: 0.1,
    //マウスの動きに合わせたパララックスの有無を指定。falseでオフ。
    parallax: true,
    //パララックスによる動きの大きさを指定。数値が少ないほど、視差効果が大きくなります。
    parallaxMultiplier: 5,
    //このプラグインの初期化が終わったタイミングで実行する処理を記述できます。
    onInit: function() {},
    //このプラグインが削除された後に実行する処理を記述できます。
    onDestroy: function() {},
});

メインビジュアルで画面いっぱいに

導入は以上ですが、例えば、メインビジュアルで
どのサイズのウィンドウサイズで開いてもフルスクリーンにしたい場合

プラグインとは関係ないですが、その方法も書いておきます。

まず、idのparticlesがついているところに
適当なクラスを付けておきます。

<div class="mainvisual" id="particles">
	<h1>タイトル</h1>
	<p>サブタイトル</p>
</div>

そして、jQueyで以下を書き加えます。

var wH = $(window).height(); //ウィンドウサイズの高さを取得
var wW = $(window).width(); //ウィンドウサイズの横幅を取得
$('.mainvisual').css('height',wH+'px'); //ウィンドウサイズの高さを指定
$('.pg-canvas').css('height',wH+'px'); //ウィンドウサイズの高さを指定
$('.pg-canvas').css('width',wW+'px'); //ウィンドウサイズの横幅を指定

.pg-canvasはこのプラグインで付与されるクラスなので、指定しなくて大丈夫です。

.pg-canvasにウィンドウサイズの横幅を指定するのは、
横幅がウィンドウサイズより大きくなるという不具合が合ったからです。
特にそういう不具合がないのであれば、指定する必要はないと思います。

このように記述するとファーストビューでウィンドウいっぱいに表示することができます。

ただ、これだけだと外部リンクでサイトに来たときに、
高さ0と取得してしまう場合がありました。

それを解決するために、
ウィンドウサイズがリサイズされた時の記述を加えると無事表示されるように

$(window).resize(function(){
	var wH = $(window).height();
	var wW = $(window).width();
	$('.mainvisual').css('height',wH+'px');
	$('.pg-canvas').css('height',wH+'px');
	$('.pg-canvas').css('width',wW+'px');
});

リサイズするたびに高さと横幅を取得して指定してくれます。

ここまでやっとけば、ほぼ心配することはなくなるはず

particles.jsという分子のような似た動きをするプラグインもありましたが、
こちらはデモを見るとスマホでは表示されなかったので導入断念しました。

でも、正直こっちの方が動きかっこいい…。

スマホでも綺麗に表示されるようになっていました。

以下の記事で使ってみました。
ParticlesもすごくカッコイイのでParticlegroundと比較して好きな方を使ってみてください。

2015/07/10　追記
【jQyery】カッコイイ分子的な幾何学アニメーションを実装できるプラグイン-Particlesの使い方-