【レポート】

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年後は? あなたの年収をデータに基づき予報します。

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

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

人気記事

一覧

イチオシ記事

新着記事

柴田英嗣、元妻&ファンキー加藤娘の健診に立会い宣言 "加藤違い"で狩野焦る
[00:12 7/30] エンタメ
ウレタン製の柔らかVRゴーグル「Merge VR」、ツクモ限定で30日から販売開始!
[00:00 7/30] パソコン
[シン・ゴジラ]日本政府対ゴジラの攻防 日本映画のスケールを超えた壮大で緻密な作品
[23:59 7/29] エンタメ
「機械仕掛けの愛」4巻発売、娘の結婚式に参列するAIのエピソード公開
[23:34 7/29] ホビー
声優・久保ユリカ、2ndシングル「SUMMER CHANCE!!」発売記念特番でMVを公開
[23:30 7/29] ホビー

求人情報