cnetのバナー広告がさりげなくHTML5のcanvasを使って表示されてた


  • 公開:
  • 更新:
  • 編集:
概要 ▶ HTML5 Fist by jasongraphix気がつかないうちにHTML5の要素は活用されているのですね、と思ったので記事にしてみました。Chrome・Firefox・Operaは自動アップデートするし、Internet Explorerも新しくなるし、やっと(?)HTML5が来そうな感じですね。(逆にスマートフォンの方がHTML5対応ブラウザの割合が多い様な…)
HTML5 Fist by jasongraphix

気がつかないうちにHTML5の要素は活用されているのですね、と思ったので記事にしてみました。

Chrome・Firefox・Operaは自動アップデートするし、Internet Explorerも新しくなるし、やっと(?)HTML5が来そうな感じですね。(逆にスマートフォンの方がHTML5対応ブラウザの割合が多い様な…)



cnetを見ていて画面上部に「春の新生活応援キャンペーン」という桜が舞い散るバナーが掲載されていました。
20120310-cnet-canvas-01


このバナーの動作は、以下の動画をご覧下さい。



このバナーを最初に見て思ったことは


「ああ、Flashの広告だよなぁ。こういうアニメーションはFlashじゃないとキレイに表示されないよね(アニメーションGIFと比べて)」



ところが、この前Internet Explorer 9のcanvas要素を見ていたせいか突然妙な違和感を感じ、Webインスペクタで要素を調べてみました。(SafariならCtrl+Alt+「I」で表示されます)
20120310-cnet-canvas-02
なんとcanvas要素でした。


どうやらsakura_ef.jsというJavaScriptで桜を舞い散らせる様子をcanvas要素に描いているようです。


canvas要素の背景に配下の画像が配置されていました。
20120310-cnet-canvas-03
Photoshoperにわかりやすいように透明部分を市松模様にしてあります(笑)。


この上に桜が舞い散る様子を描画しているのですね。なるほど。

今後はこういった簡単な動作のものはFlashからHTML5へと移行していくのでしょうね。
それもユーザーがほとんど気がつかない形で。


時代の流れを感じてしまったcnetのバナー広告の話でした。
なお、HTML5とは何?という方は以下のまとめページをどうぞ。


それでは。

※なおInternet Explorer 8だとcanvasが使えないので、桜が舞い散るアニメーションはありません。


カテゴリー:

このページをぜひシェアしてください

こんな記事も読まれています

リアクションやコメントをどうぞ