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

Javascript+JQueryを使って、少し斬新な動きのあるナビゲーションメニューを考えてみました。
一般的なナビゲーション・メニューのHtmlを１つ例示した後、その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（視差）効果として広い意味で考えると、このようにマウスの動きに合わせてナビゲーションメニューに視差効果をつけることで、奥行き感を出すことも可能です。