jQueryのプラグインParticlegroundを使うと、Webページの背景に粒子のアニメーションが加えられます(サンプル001)。マウスポインタの位置に応じた視差効果(パララックス)も備わっています。このプラグインの使い方をかいつまんでご紹介しましょう。

サンプル001■jQuery + Particleground: Background particle

01 プラグインParticlegroundのダウンロードと設定

Particlegroundのページの[DOWNLOAD]ボタンでプラグインのZIPファイルがダウンロードできます(図001)。また、ページ右上にはGitHubへのリンクがありますので、そちらで確かめてダウンロードしても結構です。

図001■Particlegroundのページ

ParticlegroundをjQueryのプラグインとして使いますので、script要素でjQueryとともに読み込みます(以下の例はParticlegroundがlibフォルダに納められている場合です)。なお、jQueryなしに単独で使うこともできます(「README.md」参照)。

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="lib/jquery.particleground.min.js"></script>

02 Particlegroundを使ってみる

とりあえず、Particlegroundを使ってみましょう。body要素にParticlegroundを用いるdivなどの要素を加え、idまたはクラスを定めます。

<div id="particles">
  <div>
    <!-- 中略 -->
  </div>
</div>

style要素には、Particlegroundの領域(widthとheight)を与えておきます。

#particles {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

あとは、JavaScriptコードでParticlegroundを定める要素のセレクタに対して、particleground()メソッドを呼び出すだけです(コード001)。デフォルトの設定(粒子と線の色は#666666)で、背景に粒子のアニメーションが表れます(図002)。

図002■デフォルトのパーティクルアニメーション

03 パーティクルの設定を変える

particleground()メソッドに設定のオプションが定められたObjectインスタンスを渡せば、パーティクルの設定が変えられます。たとえば、粒子と線の色はそれぞれdotColorとlineColor、粒子の大きさはparticleRadiusで与えます(後掲表001)。Objectインスタンスに、これらのオプションをプロパティとして値を定め、particleground()メソッドの引数に渡せばよいでしょう。つぎのコード002は、粒子と線の色を"turquoise"とし、粒子の直径を10ピクセルにしています(前掲サンプル001参照)。

Particlegroundを設定するオプションは、つぎの表001のとおりです。すべてにデフォルト値が与えられていますので、変えたいオプションのみを定めれば足ります。

さらにもうひとつ、Grant Skinner氏の作例にならって、鉛筆の線の色をドラッグし始めるたびに切り替えました(getNextColor())。HSLカラーの文字列から色相(hue)の数値を取り出して一定値(85)を加え、改めてHSLの文字列にしています(第35〜36行目)。

04 参考情報

• Particlegroundのメソッド
  Particlegroundには3つのメソッドが備わっています。
  • Particleground「README.md」
    「Methods」
  • 「Webサイトの背景をおしゃれに演出 Particleground」
    Step4「メソッドによるカスタマイズ」
• アニメーションをつねにウィンドウ全体に表示する
  つぎの記事に説明がありました。
  • 「【jQuery】ページの背景に分子的な幾何学アニメーションを実装できるプラグイン-Particlegroundの使い方-」
    「メインビジュアルで画面いっぱいに」

作成者: 野中文雄
作成日: 2015年9月29日