HTML5のインタラクションやビジュアルエフェクトを体感できる -HAKIM.SE
Post on:2010年8月26日
「HAKIM.SE」は、HTML5のインタラクション、ビジュアルエフェクト、テクノロジーの検証を行っているサイトです。
現在は9つのデモが公開されており、どれも興味深く面白いものとなっています。それぞれの操作方法を含め、簡単に紹介します。
![サイトのキャプチャ](/wp-content/uploads-2010/2010082603.png)
The HTML5 Experiments of Hakim El Hattab
各デモページへのリンクはリビジョンがアップするとリンク切れになるかもしれません。その際はトップページより参照ください。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-01.png)
Sinuous
レッドの点を避けて、グリーンの点に触れると得点されます。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-02.png)
Bakemono
マウスのクリックやドラッグ操作でモンスターが反応・追従します。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-03.png)
Keylight
ダブルクリックでポイントが設置され、美しいメロディがながれます。ポイントはドラッグが可能で、「Randomize」でポイントがランダムに設置されます。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-04.png)
Blob
ダブルクリックやドラッグなどのマウス操作でBlobが動き回ります。Blobを直接ダブルクリックすると分離し、キーボードの矢印キーにもエフェクトがあります。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-05.png)
Magnetic
磁気のポイントを設置し、それに反応する電流をコントロールします。ダブルクリックでポイントを増やし、左右の矢印キーにエフェクトがあります。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-06.png)
Trail
緩やかな軌跡を生成する粒子をクリックとホールドでコントロールします。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-07.png)
Particle Depth
マウスの動きに合わせて、奥行きをもった粒子の配置パターンが変化します。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-08.png)
Wave
ツイートが含まれた泡が波の上に浮いていて、泡をクリックするとはじけてツイートが表示されます。
![デモのキャプチャ](/wp-content/uploads-2010/2010082604-09.png)
Particles
粒子が互いにうごき、マウスが近付くと増大します。
- 注意:
- これはHTML5の検証であり、HTML5vsFlashの火種としては使用しないでください、とのことです。
sponsors