「HTML5で冷気を表現したサイトがすごいな」を分解してみた！

2013-07-19 16:30

この記事は約 2 分で読めます。

「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。

Canvasに透過pngを描画してループさせる

making-of-canvas-frozen01
(1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。

スムーズなループアニメーション

making-of-canvas-frozen012
(1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。

マスク画像を配置してアニメーションの端もリアルに

making-of-canvas-frozen02
冷気のアニメーションの上端、左右端にはグラデーションの透過pngを配置することで、冷気が自然と消えて見えるように演出しています。

おわりに

いかがでしたでしょうか。冷気を表現した画像(透過png)のリアリティによるところが大きいですが、位置や重なり具合、アニメーション速度、マスクなど、様々な要素が緻密な計算によって構成されることで、リアルな冷気の表現を可能にしていました。
試行錯誤を重ねた痕跡でしょうか、余計な<canvas>や画像も発見してしまったことは内緒です(笑)