スライドや動画など、HTML5のサンプルいくつか

Ads

個人的なメモです。スライドや
動画などをHTML5を使って
実装したサンプルをいくつか
備忘録的にメモします。こうい
うサンプル見てると未来が楽
しみになりますね。

スタイル出来ないブラウザがある限り、微妙ではありますが、HTML5 を IE や Firefox 2 でも使えるようにする方法等も出ているので頭に入れるくらいはしておいて損ないかも。

サンプルは結構あるのですが、気になったものをいくつかメモ。特にFlashに対応しないipadやiPhoneでも動画を再生できるのは素敵かも。

This presentation is an HTML5 website

html5-sample01

キーボードの矢印キーで動くスライドのサンプル。

This presentation is an HTML5 website

CanvasVideo

html5-sample02

Canvasを使ったビデオ。画面をクリックすると割れるエフェクト付き。

CanvasVideo

CanvasVideo3D

html5-sample03

こちらはcanvasを使った回転するビデオ。

CanvasVideo3D

Browser Ball

html5-sample04

これ凄いですね。ボールをドラッグで移動、離すとちゃんと弾みます。Flashじゃないのが新鮮・・

Browser Ball

GWT Quake

これ必見です。GoogleがHTML5を使ってゲームを移植した動画。これでブラウザというのが信じられません・・

GWT Quake

projekktor

html5-sample05

こちらも動画のサンプルです。

projekktor

sublime

html5-sample06

これも動画サンプルです。マウスオーバー時のエフェクトはcss3ですね。

sublime

Akihabara

html5-sample07

jsとhtml5で作るゲームのライブラリ。iPhoneでも動くみたい。

Akihabara

K3D HTML5 Canvas

html5-sample08

canvasのサンプル。なんかいろいろ動く。

K3D HTML5 Canvas

mrdoob

html5-sample09

js+html5の3Dグラフィックサンプルいくつか。

mrdoob

Canvas in 3D

html5-sample10

canvasを使った3Dギャラリー。これ凄いです。

Canvas in 3D

ball_pool

html5-sample11

グラフィックサンプル。Flashとしか思えませんがHTML5製です。何も無いところでクリックするとボールが増えます。

ball_pool

CANVAS MINIMAL PARTICLE ANIMATION DEMO

html5-sample13

canvasのデモ。好きなテキストでエフェクトを体感できます。

CANVAS MINIMAL PARTICLE ANIMATION DEMO

html5 canvas wave

html5-sample14

ウェーブするエフェクト。

html5 canvas wave

A simple drawing program

html5-sample15

html5のcanvas+jsのドローツールサンプル。

A simple drawing program

CubeOut

html5-sample16

テトリスの3Dゲームサンプル。凄い。

CubeOut

以上、サンプル集でした。標準化される時代が待ち遠しいですね。