以前に、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をヘッダーのみにする事は可能でしょうか？