jQuery

3Dナビゲーションが作れる PERSPECTIVE PAGE VIEW NAVIGATION 使い方

3d-nav

今回は、3D風のナビゲーションが作れるPERSPECTIVE PAGE VIEW NAVIGATIONのご紹介です。
実装もとても簡単に出来ます。
どんな3Dナビゲーションかといいますと、言葉で言い表すと変な風になってしまうのでwww 【デモページ】がありますので、一度ご覧頂ければと思います。

デモページ

また、必要なファイルなどは下記リンク先よりダウンロードして下さい。
使い方なども、記載してあります。

PERSPECTIVE PAGE VIEW NAVIGATION

実装方法

それでは、3Dナビゲーションの実装をしていきたいと思います。
実装の前に必要なファイルなどをこちらからダウンロードしておいて下さい。

必要ファイルの読み込み

まずは、head内にダウンロードしたファイルの中にあるcomponent.cssmodernizr.custom.25376.jsファイルを読み込み、bodyの最後にclassie.jsmenu.jsを読み込みます。
ファイルの階層などは、ご自身の階層に合わせて下さい。

・・・・・

<script src="js/modernizr.custom.25376.js"></script>
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>

・・・・・

<script src="js/classie.js" ></script>
<script src="js/menu.js"></script>
</body>
</html>

HTMLの準備

次にHTMLの準備をしていきます。
nav要素指定している所が、3Dナビゲーションとなっています。
また、メインページに表示させたい要素は、クラス【wrapper】ないに記載していきます。
少しここで注意して欲しいのですが、ナビ要素をliなどでマークアップした所エフェクトの挙動が少しおかしくなりますので、ご注意下さい。

<div id="perspective" class="perspective effect-airbnb">
    <div class="container">
        <div class="wrapper">
               ...
        </div>
    </div>
	<nav class="outer-nav left vertical">
    	<a href="#">Home</a>
    	<a href="#">News</a>
    	<a href="#">Images</a>
    	<a href="#">Uploads</a>
    	<a href="#">Favorites</a>
    	<a href="#">Messages</a>
    	<a href="#">Security</a>
	</nav>
</div>

上記のコードまでで標準的な実装は完了となります。
実装も特に難しいところもなくすんなり3Dナビゲーションが出来ると思います。
デモサイトもありますので、ご参考下さい。

デモページ

また、こちらの3Dナビゲーションには、6種類ほどエフェクトの種類がありますので、そこも少し紹介したいと思います。

エフェクトの変更

エフェクトの変更も簡単で、HTML側のクラスの変更で可能となっております。
それでは、エフェクトの変更していきましょう。

Airbnb Effect

PerspectivePageViewNavigation01
<div id="perspective" class="perspective effect-airbnb">
    <div class="container">
        <div class="wrapper">
               ...
        </div>
    </div>
	<nav class="outer-nav left vertical">
    	<a href="#">Home</a>
    	<a href="#">News</a>
    	<a href="#">Images</a>
    	<a href="#">Uploads</a>
    	<a href="#">Favorites</a>
    	<a href="#">Messages</a>
    	<a href="#">Security</a>
	</nav>
</div>

Move Left

PerspectivePageViewNavigation02
<div id="perspective" class="perspective effect-moveleft">
    <div class="container">
        <div class="wrapper">
               ...
        </div>
    </div>
	<nav class="outer-nav right vertical">
    	<a href="#">Home</a>
    	<a href="#">News</a>
    	<a href="#">Images</a>
    	<a href="#">Uploads</a>
    	<a href="#">Favorites</a>
    	<a href="#">Messages</a>
    	<a href="#">Security</a>
	</nav>
</div>

Rotate Left

PerspectivePageViewNavigation03
<div id="perspective" class="perspective effect-rotateleft">
    <div class="container">
        <div class="wrapper">
               ...
        </div>
    </div>
	<nav class="outer-nav right vertical">
    	<a href="#">Home</a>
    	<a href="#">News</a>
    	<a href="#">Images</a>
    	<a href="#">Uploads</a>
    	<a href="#">Favorites</a>
    	<a href="#">Messages</a>
    	<a href="#">Security</a>
	</nav>
</div>

Move Down

PerspectivePageViewNavigation04
<div id="perspective" class="perspective effect-movedown">
    <div class="container">
        <div class="wrapper">
               ...
        </div>
    </div>
	<nav class="outer-nav top horizontal">
    	<a href="#">Home</a>
    	<a href="#">News</a>
    	<a href="#">Images</a>
    	<a href="#">Uploads</a>
    	<a href="#">Favorites</a>
    	<a href="#">Messages</a>
    	<a href="#">Security</a>
	</nav>
</div>

Rotate Top

PerspectivePageViewNavigation05
<div id="perspective" class="perspective effect-rotatetop">
    <div class="container">
        <div class="wrapper">
               ...
        </div>
    </div>
	<nav class="outer-nav bottom horizontal">
    	<a href="#">Home</a>
    	<a href="#">News</a>
    	<a href="#">Images</a>
    	<a href="#">Uploads</a>
    	<a href="#">Favorites</a>
    	<a href="#">Messages</a>
    	<a href="#">Security</a>
	</nav>
</div>

Lay down

PerspectivePageViewNavigation06
<div id="perspective" class="perspective effect-laydown">
    <div class="container">
        <div class="wrapper">
               ...
        </div>
    </div>
	<nav class="outer-nav top horizontal">
    	<a href="#">Home</a>
    	<a href="#">News</a>
    	<a href="#">Images</a>
    	<a href="#">Uploads</a>
    	<a href="#">Favorites</a>
    	<a href="#">Messages</a>
    	<a href="#">Security</a>
	</nav>
</div>

上記が6種類のエフェクトとなります。
実装やエフェクトの変更も簡単に出来ますので、是非3Dナビゲーションのストックの一つとしてもいいのでは無いでしょうか。
また、デモページもありますので、ご参考下さい。

デモページ

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

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

PREVIOUS hunterxhunter

第二回天空闘技場 負けない安定パーティメンバーはこれだ!!

NEXT Home_VS09pitotop

HUNTER×HUNTER バトルオールスターズ VS ネフェルピトー(上級)を攻略したパーティメンバー