ここ最近、比較的たくさんのWEBサイトを見て回る機会があったのですが、その中で
「よくできてるなー」
と関心したWEBサイトを二つだけご紹介します。
どこに一番関心したかと言うと、どちらもFlashを使わなくてもJavascriptだけでこんな表現が実装できるのかー、
ということです。
まず一つ目は「レゴランド・ディスカバリー・センター」さんのオフィシャルWEBサイト。
マウスを左右上下に動かすと、メインの画像イメージも左右上下に動く分けですが、
左右上下の移動距離が奥行き感のあるレイヤー毎に微妙に異なるので、すごく立体感が表現さています。
ちょっと感激しました。
作りとしては、至極大まかに言うと、
■遠近それぞれのレイヤー毎の画像群を１つのDIVブロックにしてposition:abusolute で配置
■mousemoveイベント処理で遠近レイヤーブロック毎に動く距離を変えている。閲覧者に近い（と思わせたい）レイヤーは大きく、遠い（と思わせたい）レイヤーは小さく動かす
ということかと思います。
⇒ いわゆる パララックス（parallax） というやつですね。
もう一つは、「ÉDITO 365 [エディト・トロワ・シス・サンク]」さんのサイト。
モノトーンの画像がいくつかタイル状に並べられています。
マウスカーソルをどれかの画像に合わせると。。。
モノトーンのイメージ不透明になって行くと同時に、同じ内容のカラー画像イメージが下に少しスライドしながら現れてくる。下にスライドした分の上の余白に見出し文字が現れる。
という動きをします。
このトップページは全ファイルのロードが6MBもあってちょっと多いですが、最初にナビゲーションメニューを表示して画像のロード中はWAITマークが表示されるという配慮もされています。
こちらも、大まかな作りとしては
■グレースケールの画像 Canvasタグ、カラーの画像 Divタグ、見出しのH1タグ をposition:absolute で配置
■mouseoverイベント処理で、不透明度、位置を調整 （この場合はmargin-topで調整しているようです）。
となっているようです。
コメントを残す