[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js

Post on:2015年2月24日

sponsorsr

ピザのように切り分けたパイ状のナビゲーション、水平でも垂直でもない回転を取り入れたタブ、アイコンをクリック（タップ）するとぐるぐるっとアイテムが表示されるなど、回転を使った面白いナビゲーションを実装できるスクリプトを紹介します。

wheelnav.jsのデモ

デモは、デスクトップ・スマホのSVG対応のメジャーブラウザ全てで動作します。
数多くあるデモからいくつかGIFアニメーションにしてみました。

ピザのように切り分けられたパイ状のナビゲーション。ぐるぐる回転するだけでなく、中身もそれに合ったアニメーションで動きます。

回転を使ったタブ。こんなデザイン、初めて見ました！

アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。

当スクリプトとRaphaël.jsを外部ファイルとして記述します。

[html]

...

[/html]

ナビゲーションを配置する空divを用意します。

[html]

[/html]

スクリプトでナビゲーションのスタイルや動きを定義します。

[javascript]
wheel = new wheelnav("wheelDiv");
wheel.initWheel(["init", "create", "navigate", "refresh"
[/javascript]

詳しい実装方法は、下記ページをご覧ください。