「Flashを使わなくてもここまでできるのか」と関心したWEBサイト2つ


ここ最近、比較的たくさんのWEBサイトを見て回る機会があったのですが、その中で

「よくできてるなー」

と関心したWEBサイトを二つだけご紹介します。

どこに一番関心したかと言うと、どちらもFlashを使わなくてもJavascriptだけでこんな表現が実装できるのかー、

ということです。

まず一つ目は「レゴランド・ディスカバリー・センター」さんのオフィシャルWEBサイト。

マウスを左右上下に動かすと、メインの画像イメージも左右上下に動く分けですが、

左右上下の移動距離が奥行き感のあるレイヤー毎に微妙に異なるので、すごく立体感が表現さています。

ちょっと感激しました。

作りとしては、至極大まかに言うと、

■遠近それぞれのレイヤー毎の画像群を1つのDIVブロックにしてposition:abusolute で配置

■mousemoveイベント処理で遠近レイヤーブロック毎に動く距離を変えている。閲覧者に近い(と思わせたい)レイヤーは大きく、遠い(と思わせたい)レイヤーは小さく動かす

ということかと思います。

⇒ いわゆる パララックス(parallax) というやつですね。

もう一つは、「ÉDITO 365 [エディト・トロワ・シス・サンク]」さんのサイト。

モノトーンの画像がいくつかタイル状に並べられています。

マウスカーソルをどれかの画像に合わせると。。。

モノトーンのイメージ不透明になって行くと同時に、同じ内容のカラー画像イメージが下に少しスライドしながら現れてくる。下にスライドした分の上の余白に見出し文字が現れる。

という動きをします。

このトップページは全ファイルのロードが6MBもあってちょっと多いですが、最初にナビゲーションメニューを表示して画像のロード中はWAITマークが表示されるという配慮もされています。

こちらも、大まかな作りとしては

■グレースケールの画像 Canvasタグ、カラーの画像 Divタグ、見出しのH1タグ をposition:absolute で配置

■mouseoverイベント処理で、不透明度、位置を調整 (この場合はmargin-topで調整しているようです)。

となっているようです。

カテゴリー: WEB

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

はてなブックマーク人気エントリー
カテゴリー