動きのあるナビゲーションメニュー – 視差効果


Javascript+JQueryを使って、少し斬新な動きのあるナビゲーションメニューを考えてみました。
一般的なナビゲーション・メニューのHtmlを1つ例示した後、そのHTMLにはほとんど手を加えずに、Javascriptだけでがらっと雰囲気を変えたメニューにすることができる例を示したいと思います。
ユーザビリティの面で賛否が分かれるかもしれませんが、斬新ではあると思います。

はじめに、HTML5+CSS3で一般的に作ることができるナビゲーションメニューの一例として、CSS3から新しく使えるようになったグラデーション背景の属性を使った例を挙げてみます。

上のナビゲーションメニューは、スタイルシートのbackground属性に、
・Firefoxなどのmozilla系ブラウザの場合は-moz-linear-gradient
・ChromeやSafariなどのWebkit系ブラウザの場合は-webkit-gradient
・IEの場合は、filter属性を使うとグラデーション背景にできたのですが、hoverした時の反応がよろしくなかったのでただの単一色背景
としています。
HTMLコードは以下のようになります。

<div class="nav_area">
<nav>
<ul class="m001">
<li><a href="#" onclick="this.blur();">Am I dead?</a></li>
<li><a href="#" onclick="this.blur();">Far from it.</a></li>
<li><a href="#" onclick="this.blur();">Don't think you are.</a></li>
<li><a href="#" onclick="this.blur();">Know you are.</a></li>
</ul>
</nav>
</div>

つづいて、本題のナビゲーションメニューです。
DOM要素を取得するためulタグにid属性を追加する以外は、HTMLコードには手を加えずにJavascript(JQuery)を使ってがらっと雰囲気を変えてみた例です。
マウスカーソルを左右に動かすと、動きが確認できます。
スマートフォンではマウスカーソルを動かせないので確認できませんのでPCでご覧下さい。

上のナビゲーションメニューは、マウスカーソルの左右の動きに合わせて各メニュー項目の動く幅が手前側ほど大きくなるようにしています。
WEBでパララックス効果というとスクロールに合わせて遠近感のあるアニメーションを表示することが主流のようですが、本来の意味のparalax(視差)効果として広い意味で考えると、このようにマウスの動きに合わせてナビゲーションメニューに視差効果をつけることで、奥行き感を出すことも可能です。

カテゴリー: WEB

コメントを残す

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

*

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

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