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

1

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

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

スポンサーリンク

 

じつは去年もやりました

実は去年も同じ企画をしており、去年は2D描画で昔からよくみるエフェクトですがクリックが効きます。よかったらそちらもご参照ください。

  1. santa

 

準備

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

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

    WordPress:ページや記事ごとに個別のCSSやJavaScriptを追加する方法 | NxWorld

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

 

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

 

 

スポンサーリンク