今年は迫力の3Dでワードプレスに雪を降らす

二条城と雪

雪のシーズン到来ということで、ブログに季節感をプラスする雪を降らせてみました。HTML5のcanvasに対応したブラウザなら、このページには既に雪がチラチラしていると思います。(降ってない)JavaScriptの3Dライブラリ『Three.js』で描画されており、雪は立体的に舞います。マウスの動きにも反応します。

ただ難点として、canvasを画面いっぱい被せてるのでリンク等のクリックが効きません。そのため画面内でクリックが発生したらcanvasと共に雪は消えます。

 

準備

JavaScript HTML5 Canvas Snow in 3D | Seb Lee-DelisleのスクリーンショットJavaScript HTML5 Canvas Snow in 3D | Seb Lee-Delisle

こちらのページにあるスクリプトを使わせてもらいます。githubから

  • snow3d.html
  • Snow.js
  • ThreeCanvas.js
  • ParticleSmoke.png
が必要になります。

同梱のParticleSmoke.pngは、真っ白の雪なので、当サイトのように白ベースのデザインだと目立ちません。なので新しくsnow.pngを作成しました。こちらはややgrayな雪です。

snow

snow.png

 

導入

2つのjsはそのままロードします。アップロード場所は同ドメイン内に適当に。
  • Snow.js
  • ThreeCanvas.js
の雪を降らせるのはこの記事だけなので、記事内に直接JavaScriptを記述しました。

<script type="text/javascript" src="http://example.com/wp-content/uploads/2013/12/snow/ThreeCanvas.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/uploads/2013/12/snow/Snow.js"></script>

次にsnow3d.htmlの中のscript部分をまるまる持ってきます。これも記事内に記述しました。

そのままコピペしても動きません。まずinitという関数を呼び出す必要があるので、

script内に
if (window.addEventListener) {
  window.addEventListener("load", init, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", init);
} else  {
  window.onload = init;
}
を追加。
particleImage.srcをアップロードした画像に変更。
particleImage.src = 'http://example.com/wp-content/uploads/2013/12/snow/snow.png';
マウスクリックでcanvasを削除するイベント登録
container.addEventListener( 'click', function(){container.parentNode.removeChild(container)}, false );
container.addEventListener( 'touchstart', function(){container.parentNode.removeChild(container)}, false );
container.addEventListener( 'mousemove', onDocumentMouseMove, false );
自動で作成されるdiv要素にid追加。
container = document.createElement('div');
container.id = 'snow_canvas'; 
document.body.appendChild(container);
div要素にCSSを定義。これをしないとページ最後に表示される事になります。
#snow_canvas{
    z-index: 30000000000000;
    position: fixed;
    top:0;
    left: 0;
}
私は記事ごとにJSとCSSを追加設定できるようにしています。

WordPress:ページや記事ごとに個別のCSSやJavaScriptを追加する方法 | NxWorldのスクリーンショットWordPress:ページや記事ごとに個別のCSSやJavaScriptを追加する方法 | NxWorld

for (var i = 0; i < 500; i++)の数値が画面内の雪の数です。自由に変更できます。いくつかサンプルで変更できるようにしてみました。

 

ソースを少しいじる必要があるので簡単!とまでは言えませんが、今までにない迫力が魅力です。 うまく動かない場合は、この記事のソースも参照してみてください。

 

広告