海外で人気のサイトの中から、JavaScriptを使ったギミックがすごすぎるサイトをいくつかピックアップしてみました。新しいサイトを作る際などのインスピレーションとして眺めてみるのも楽しいと思います。
01. SF Dok - 360° Langstrasse Zürich
スクロール(マウスホイール)することで、ストリートを歩いているようなエフェクトがかかります。
![](/img/upload/1073.png)
02. Unfold
すごすぎるくらいスクロールします。
![](/img/upload/1045.png)
03. Nouvelle Vague by ultranoir
WebGLを使った3Dのサイトです。最初に適当にタグを入力すると始まります。
※環境によっては、動かないかもしれません。
![](/img/upload/1046.png)
04. Volkswagen Beetle
ビートルのサイトです。スクロールすることで、ビートルが走ります。
![](/img/upload/1047.png)
04. Draw a Stickman
書いた絵で物語が展開します。とりあえず、棒人間(stickman)というものを、書いてください・・・。
![](/img/upload/1048.png)
05. INTERACTIVE SHOWREEL
こちらもスクロール系ですが、細かいギミックが全体の雰囲気を作り出しています。
![](/img/upload/1052.png)
06. Visions of Beauties by Lancôme
投稿されたツイートや写真を使って動的にアニメーションしています。TOPページから入ってて、「Every Where」などのメニューを選択してみてください。
![](/img/upload/1056.png)
07. Live HD Polar Bear Video
スクロールにあわせて車が動きます。思わずスクロールしたくなる仕掛けです。
![](/img/upload/1072.png)
08. Selected works from Guilherme Pangnotta — Sete Três
若干使い方がわかりませんが、数字をクリックすることで、コンテンツが展開します。
![](/img/upload/1060.png)
09. Soulwire
決して派手ではないですが、細かいギミックがこのサイトにはちりばめられています。
![](/img/upload/1064.png)
まとめ
スクロールで動くというのが1つのトレンドになりつつあるようです。
スクロールするサイト(マウスホイール)というのは、その動きばかりに注目しがちです。しかし、どんな利用者でもランディングページのフッターまでは、スクロールして見ようとする特性を利用して、すべてのコンテンツを見せるという仕掛けであることに、Webデザイナーは注目すべきです。
スクロールするサイトに興味があったら、「流行のjQueryでスクロールするサイトを集めてみました」でも書いていますので、そちらもみてね。
コメント