読者です 読者をやめる 読者になる 読者になる

Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

Flashじゃないんだぜコレ…HTML5+CSS3で書かれた驚きのサイト7つ

早いもので年が明けて1か月が経ちました。春はまだ遠いと思っていましたが少し暖かくなってきたような気もします。

 

来年に正式勧告が予定されているHTML5ですが、既に世の中にはHTML5を駆使したサイトがたくさんあります。

今日は「HTML5+CSS3で書かれた一瞬Flashと見間違うようなサイト」をご紹介します。  

 

ウェブの進化 

http://www.evolutionoftheweb.com/ 

f:id:webarekore:20130203182712j:plain

すごい上に勉強になるサイトです。

ブラウザの歴史とインターネットの歴史。さらに画面の明度を変えたり、ズームイン/アウトも出来ちゃいます。

 

 

Mr.doob

http://mrdoob.com/92/Google_Gravity_HTML5

f:id:webarekore:20130203182754j:plain

かつてFlashのActionScriptで高度なインタラクティブな実験サンプルを公開していた方のHTML5実験サイトです。

あのGoogleがめちゃくちゃになったり、ソリティアのアレが延々と現れたり……一見の価値アリです。

 

 

ROXIK 

http://roxik.com/mona/ 

f:id:webarekore:20130203182828j:plain

モナリザと写楽の顔を引っ張ることができるサイトです。

3DSのプリセットゲームにこんなんあったな……。

 

 

Form Follows Function 

http://fff.cmiscm.com/#!/main 

f:id:webarekore:20130203182922j:plain

HTML5とCSS3の実験的サンプルがてんこもりなサイト。ブラウザによってはちょっとカクカクしてしまうようですが……。動きや色使いがとても素敵です。

個人的にはPlant Treesがお気に入り。

 

 

Beercamp 2012 

http://2012.beercamp.com/ 

f:id:webarekore:20130203183036j:plain

CSS3で書かれた立体絵本です。

マウスでホールドしながら本をめくるように動かすと……。絵柄もポップで可愛らしいです。

 

 

 Agent 008 Ball

http://agent8ball.com/ 

f:id:webarekore:20130203183121j:plain

HTML5+CSS3で書かれたビリヤードゲームです。玉を飛ばす方向を決めたらマウスで打つ強さを調節することができます。

かなり遊べます。私は気づいたら30分ほど夢中になっていました……。

 

 

The Shodo 

http://www.theshodo.com/ 

f:id:webarekore:20130203183557j:plain

その名の通りWeb上で書道が体験出来るサイトです。最初にSNS等のサインインを求められますが、登録をしなくても遊べます。BGMがいい感じ。

硯で墨汁の色や濃さを、筆で太さを選べます。かなり本格的で、出来た書はSNSで投稿することも出来ます。

 

いかがでしたでしょうか。

 Flashじゃないの? ウソだろ……と思わず言いたくなるサイトばかりだったと思います。

正直、私はソースコードを見ても何が起こっているのかサッパリですが……いつかこんなサイトを制作してみたいものですね。