[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
Post on:2015年2月24日
sponsors
ピザのように切り分けたパイ状のナビゲーション、水平でも垂直でもない回転を取り入れたタブ、アイコンをクリック（タップ）するとぐるぐるっとアイテムが表示されるなど、回転を使った面白いナビゲーションを実装できるスクリプトを紹介します。
wheelnav.js
wheelnav.js -GitHub
wheelnav.jsのデモ
デモは、デスクトップ・スマホのSVG対応のメジャーブラウザ全てで動作します。
数多くあるデモからいくつかGIFアニメーションにしてみました。
ピザのように切り分けられたパイ状のナビゲーション。ぐるぐる回転するだけでなく、中身もそれに合ったアニメーションで動きます。
回転を使ったタブ。こんなデザイン、初めて見ました！
アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。
wheelnav.jsの使い方
Step 1: 外部ファイル
当スクリプトとRaphaël.jsを外部ファイルとして記述します。
<head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head>
Step 2: HTML
ナビゲーションを配置する空divを用意します。
<div id="methodsWheelDiv" class="wheelNav400"></div>
Step 3: JavaScript
スクリプトでナビゲーションのスタイルや動きを定義します。
wheel = new wheelnav("wheelDiv");
wheel.initWheel(["init", "create", "navigate", "refresh"
詳しい実装方法は、下記ページをご覧ください。
sponsors
