このページの本文へ

Webサイトの背景をおしゃれに演出 Particleground

2014年11月06日 11時00分更新

大竹孔明

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

Particleground


 「Particleground」は、Webページの背景にパーティクルアニメーション(爆発時の飛散物のように、たくさんの点が同時に動くアニメーション)を表示するプラグインです。ユーザーの目を引くおしゃれな背景を手軽に導入でき、マウスカーソルに追従して動く視差効果(パララックス)の機能もあります。

 ParticlegroundプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降の「ブラウザ」に対応しています。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、 Particlegroundを配布ページからダウンロードします。ページ中央の「Download」ボタンをクリックして保存します。

Particleground配布ページ
Particleground配布ページ

 ParticlegroundはGitHubでも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。

 利用するWebページのbodyの閉じタグ直前で、jQuery本体と、ダウンロードしたParticlegroundのルート直下にあるminifyファイル「jquery.particleground.min.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.particleground.min.js"></script>
</body>
//(中略)

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 jquery.particleground.min.jsを読み込んだ後、particleground()メソッドを実行します。particleground()メソッドは、背景を表示したい要素をセレクターと.(ドット)繋ぎで指定します。下の例ではclass名「particleground」を指定しています。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.particleground.min.js"></script>
<script type="text/javascript">
$('.particleground').particleground();
</script> 
</body>
//(中略)

 これで、指定したエリアにパーティクルが出現します。

 続いてHTMLを記述します。背景にパーティクルを敷きたい要素に対して、class名「particleground」を付与します。

HTML


//(中略)
<div class="particleground">
// ここにスクロールさせる要素を記述
</div>
//(中略)

 背景色をCSSで指定します。必要に応じて、幅や高さも指定します。

CSS


//(中略)
. particleground {
  background: #16a085}
//(中略)

 以上で基本的な機能は実装できました。動画のようになっていればOKです。

step3 オプションによるカスタマイズ

 Particlegroundで描く背景は、オプションで細かく変更できます。オプションは、以下のようにparticleground ({...})内に指定します。

JavaScript


//(中略)  
  $('.particleground').particleground({
  // ここにオプションを指定する
    dotColor : "#ff0000",
    lineColor : "#ff0000"
  });
//(中略)  

 複数のオプションを指定する場合は、,(カンマ)区切りで指定します。

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

Step4 メソッドによるカスタマイズ

 Particlegroundには、背景の動きを制御するメソッドもいくつか用意されています。動きを止めたり、再開したりしたいときは、以下のようにparticleground()の引数にメソッド名を指定します。

JavaScript


//(中略)
  $(".particleground").particleground("メソッド名");
//(中略)

メソッド 説明
pause particle ground の動きを一時停止します。
記法:$("#your-element").particlegound("pause");
start 一時停止している particle ground の動きを再開します。
記法:$("#your-element").particlegound("start");
destroy 指定したエレメントから、プラグインへの紐付けを完全に取り除きます。
記法:$("#your-element").particlegound("destroy");

 オプションの利用例はデモで確認してください。

 いかかでしょうか? プロモーションサイトやキャンペーンページで、華を添えるエフェクトが簡単に実装できますね。


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く