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

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

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

準備

JavaScript HTML5 Canvas Snow in 3D | Seb Lee-Delisle

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

• snow3d.html
• Snow.js
• ThreeCanvas.js
• ParticleSmoke.png

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

snow.png

導入

• Snow.js
• ThreeCanvas.js

<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という関数を呼び出す必要があるので、

if (window.addEventListener) {
  window.addEventListener("load", init, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", init);
} else  {
  window.onload = init;
}

particleImage.src = 'http://example.com/wp-content/uploads/2013/12/snow/snow.png';

container.addEventListener( 'click', function(){container.parentNode.removeChild(container)}, false );
container.addEventListener( 'touchstart', function(){container.parentNode.removeChild(container)}, false );
container.addEventListener( 'mousemove', onDocumentMouseMove, false );

container = document.createElement('div');
container.id = 'snow_canvas'; 
document.body.appendChild(container);

#snow_canvas{
    z-index: 30000000000000;
    position: fixed;
    top:0;
    left: 0;
}

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