HTML5で作成されたクールなデモページ集
今年に入り、Flashにかわる技術になる?と言われているHTML5ですが、検索してみるとHTML5を使ったデモサイトも増えてきているようですね。YouTubeもすでに対応しており、(http://www.youtube.com/html5)にアクセスして『HTML5 ベータ版を有効にする』をクリックするだけで対応している映像はHTML5のビデオプレーヤーで再生できます。『Safari』でテストしてみましたが問題なく再生できました。また、色々な実験的デモサイトも存在しますので気になったサイトをちょっとご紹介します。
◎HTML5 Canvas and Audio Experiment
HTML5のCanvasとAudioを使った実験ページです。滑らかなアニメーションとインタラクティブな動きはまるでFlashです。
◎Apple HTML5 Showcase
Appleが公開しているHTML5のサンプル集(Video,Typography,Gallery,Transition,Audio,360°,VR)です。残念ながらSafariでしか見る事ができないのですが、どれも可能性を感じさせてくれます。しかしSafariでしか見れないとはアップルらしい・・・。
◎HTML5 Video Destruction
ビデオの再生部分をクリックすると、画面が破裂して散らばった破片上でも映像が再生されるというデモページです。
◎Google Home Page Pacman
話題になったHTML5で作られたパックマンです。ちゃんとゲームができます。Googleが残しておいてくれているようですね。無くなる前に是非体験してみてください!
◎SublimeVideo – HTML5 Video Player – Demo
シングルでの再生やlightboxを使ったモーダルウィンドウでの再生デモがご覧いただけます。技術も素晴らしいですが映像のクオリティも高く、とにかく美しいです。必見です。
◎Canvasmol
canvasの可能性を感じさせてくれる3Dモデリングのデモページです。研究所とかで実装されていく事でしょう。
◎Ball Pool
描画されたオブジェクトが重力によってバウンドするデモページです。Flashでは作成した事があるのですが、同じような事がHTML5で実現できるとはすごいです。
◎Bomomo
canvasを使ったお絵描きアプリケーションです。こういったWEBアプリケーションもHTML5で実現できたりします。
◎Flickr and Canvas in 3D
パネルをクリックするとfrickerの画像が次々と表示されます。面白い演出ができそうです。
◎Google Images Gift Box – CSS 3D example
Googleと書かれたギフトボックスをマウスでグリグリ立体的に動かす事ができ、検索するとボックスが開く仕掛けです。
残念ながら現バージョンのIEでは、HTML5をまともに動作させる事はできないようですがIE9はHTML5に対応するそうですので、今後はもっと増えていくかと思われます。今後のFlashやSilverlightの位置も気になる所です。