【レポート】

HTML5の機能を知るための15のデモンストレーション

 

Tech Drive-in - Technology, Linux, Ubuntu FTW

主要ブラウザの対応が進んでいることもあり、HTML5の技術を活用したデモンストレーションサイトが増えている。現在主流の技術と互換性が高いことから、すでにHTML5を採用すべきという意見もある。ブラウザの更新頻度は早まる傾向にあり、HTML5/CSS3の対応は日進月歩で進んでいくことになるとみられる。

HTML5やCSS3のデモンストレーションサイトやテクニック紹介ブログはこれまで何度も取り上げてきた。15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flash - Tech Drive-inにおいて、HTML5デモンストレーションサイトがまとめられており参考になる。中にはこれまでマイコミジャーナルで取り上げたサイトも含められている。紹介されているサイトは次のとおり。リンク先がそのままデモンストレーションページになっている。

  1. HTML5 Demo
  2. HTML5 Ball Pool Demo
  3. SublimeVideo HTML5 Video Player
  4. Interactive Photo manipulation HTML5 Demo
  5. Fireworks
  6. Kaleidoscope
  7. Drag and Drop functionality demo
  8. Particles in Motion
  9. HTML5 Canvas
  10. Video Blow-up
  11. Cloth Animation 3D
  12. Google Images Gift Box
  13. SmallTalk
  14. Breakout
  15. Catch the Square

HTML5 Ball Pool Demo - ボールのシミュレーション。ボールはドラッグ&ドロップが可能で、ほかのボールにあたって相互に動きをみせる

Fireworks - 入力した文字を花火で描いていくデモンストレーション

Particles in Motion - マウスの動きに応じて流れる模様デモ

Kaleidoscope - 万華鏡のシミュレーション

Video Blow-up - マウスでクリックするとその周辺の画像が吹き飛ぶ。しばらくするとパーツが動き出して元に戻る

Cloth Animation 3D - 布のシミュレーション。一部をつかんで移動させることが可能。美しい動きをみせる

15 HTML5 Demos Showcasing Prowess of HTML5 Over Adobe Flashのタイトルにもある通り、Flashの代替えとして使えるHTML5デモという位置づけになっており、どのデモンストレーションもインタラクティブに動作するものになっている。開発版など最新のブラウザを使って閲覧することで、HTML5/CSS3/JavaScirptでどういった機能を実現できるのかを確認できる。



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

ロンブー淳、極楽・山本の地上波復帰に「長かった…」「おかえりなさい」
[10:15 7/31] エンタメ
iPhone基本の「き」 第208回 仕事で使いたくなるiPhoneの小技 - メールの添付ファイル、どうしてますか
[10:00 7/31] スマホとデジタル家電
平成以降最悪の被害、障害者殺傷事件の深層に迫る『NHKスペシャル』
[09:00 7/31] エンタメ
さんま、中居へのSMAP騒動直撃は「本当にファンの気持ちで…」
[09:00 7/31] エンタメ
パンケーキや豚カツをプラス!? "進化系冷やし中華"を自宅で再現してみた!
[09:00 7/31] 趣味

求人情報