以前に、NibblerというSEOチェックツールを紹介しました。
このNibblerの背景では、以下のような3Dパーティクルが利用されています。
以前から、「Nibblerで使われている3Dを用いた背景は、どうやっているんだろう?」とちょっと気になっていました。
で先日、Nibblerほど凝ったものではないけど、3Dパーティクルを背景に表示させることができるParticlegroundというスクリプトを知りました。それで、このParticlegroundをWordpressで使えないか試してみたら、何とかできたので、その方法の紹介です。
目次
Particlegroundとは
Particlegroundとは、背景に動的に動く3Dパーティクルを表示させるためのJavaScriptプラグインです。
HTML5キャンバスをサポートするブラウザなら、どんなブラウザでも動作します。
基本的にJavaScriptだけで動作します。jQueryライブラリを呼び出して、実行コードをjQueryで書けばjQueryでも動作します。
詳しい仕様は以下です。
jnicol/particleground · GitHub
主な手順
WordPressテーマから利用する主な手順は以下です。
- Particlegroundをダウンロード&設置
- Particlegroundライブラリの呼び出し&実行コードを書く
- Particlegroundが作成するcanvas用にスタイルを書く
WordPressから利用するには、Particlegroundデモの方法とは、ちょっと違います。けれど、コードの仕組みとか関係なく、編集動作だけで見れば、コードコピペ2回でできるのでそれほど難しくはないと思います。
ダウンロード&設置
まずは、Particlegroundからスクリプトをダウンロードします。
「particleground-master.zip」というファイルがダウンロードされるので解凍します。
中にあるファイルで利用するのは以下のJavaScriptファイルだけです。
- jquery.particleground.min.js
このJavaScriptファイルを、Wordpressテーマ内に、以下のように設置します。
- テーマディレクトリのパス/js/jquery.particleground.min.js
ライブラリの呼び出し&実行コードを書く
次に、header.phpの<head></head>内か、footer.phpの</body>手前に以下のコードを書きます。
<!-- jQueryがない場合 --> <!-- <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.min.js'></script> --> <!-- 子テーマで利用する場合 --> <script type='text/javascript' src='<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.particleground.min.js'></script> <!-- 親テーマで利用する場合 --> <!-- <script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/jquery.particleground.min.js'></script> --> <script type="text/javascript"> //jQueryでの記述 jQuery(document).ready(function() { jQuery('#container').particleground({//キャンバスを挿入する要素を指定 dotColor: '#85E0F7', //点の色 lineColor: '#85E0F7', //線の色 }); }); //JavaScriptでの記述 // document.addEventListener('DOMContentLoaded', function () { // particleground(document.getElementById('container'), {//キャンバスを挿入する要素を指定 // dotColor: '#85E0F7', //点の色 // lineColor: '#85E0F7' //線の色 // }); // }, false); </script>
WordPressテーマが、jQueryを利用していない場合は、jQueryライブラリ部分をコメントアウトしてください。
「JavaScriptでの記述」と書かれた部分にのようなコードを書くことで、jQueryを使わずに実装することもできます。
「#container」の要素指定部分は、使用しているテーマの環境に合わせて変更してください。
また、色指定も好みに合わせて変更してください。
canvas用にスタイルを書く
上記までの設定で、当サイトで使用しているテーマの大外枠である「#container」に、Particlegroundが作成するCanvasが挿入されます。
ただ、そのままでは、本文の上に挿入されるだけになるので、Canvas部分を背景に設定するCSSをstyle.cssあたりに記入します。
#container canvas.pg-canvas { position: fixed; z-index: -100; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; background-color: #149CEE; }
この背景スタイル指定は、背景を動画にしたときの指定とほぼ同じです。
これで設定は終わりです。
動作確認
動作確認すると、以下のように表示されます。
実際に、このページにも実装していたのですが、処理が重たいので取り外しました。
ローカルテスト環境のWordpressでは、処理も重くならずに動作していました。
全く同じテーマでテストしているので、大きな違いと言ったら、インストールしているプラグインの違いとサーバーの違いくらいしかありません。
インストールしているプラグインによっては、干渉するようなものもあるのかもしれません
まとめ
パーティクルの背景は、正直Wordpressと相性がいいとは思いません。
ただ、通常サイトやWEBサービスで、「目を引く背景を」とか「背景で技術感を出したい」とかにはいいかもしれません。
ものすごく参考になりました!
ありがとうございます。
質問なのですが、Particlegroundをヘッダーのみにする事は可能でしょうか?