HTML5はまだまだ黎明期で、新しく登場するAPIを含めて色々試せる時期にあると言えます。実務ではまだ採用が難しい技術でも今のうちに試してその成果を公開することで他のプログラマー、デザイナーに技術力がアピールできます。 今後ますます利用範囲が広がるHTML5だけに思い切った試みをしてみるのも良さそうです。ということで今回はHTML5/Canvasを使って雪を降らせるアニメーションを実現するLET IT SNOWを紹介します。 まずは画像で紹介します。 雪が舞っています。マウスに反応して散らすことができます。 スピードコントロール。自由に降らせる速度をコントロールできます。 風のコントロール。上から下だけでなく斜めに降らせることができます。 単純な丸だけでなく、画像を利用できます。 画像だけでは分かりづらいので動画で紹介します。

使い方

実際の使い方として、まずHTMLは次のようになります。単純にcanvasタグを配置するだけです。

<body>
  ..
  <canvas class="snow" width="100%" height="100%"></canvas>
  ..
</body>

そしてJavaScriptは次のように記述します。

$("canvas.snow").let_it_snow({
  speed: 0,
  interaction: true,
  size: 2,
  count: 200,
  opacity: 0,
  color: "#ffffff",
  windPower: 0,
  image: false
});

スピード、サイズ、数、色、風の強さそして画像などパラメータがオプションで渡せるようになっています。デスクトップはもちろん、スマートフォンでも動作するようです。

従来であればFlashや動画を使っていたような表現がHTML5/JavaScriptに置き換わってきています。メリットはやはりスマートフォン、タブレットなどマルチデバイスへの対応と言えるでしょう。まずはこれまでFlashで行われていたインタラクティブな表現を置き換えてみるというのも良さそうです。 LET IT SNOWはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Create and Control Festive Snow on Your Website using HTML5 Canvas Let Your Website Snow using HTML5 Canvas