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

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

サイトのキャプチャ

wheelnav.js
wheelnav.js -GitHub

wheelnav.jsのデモ

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

デモのアニメーション

demo: core

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

デモのアニメーション

demo: wheel tab

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

デモのアニメーション

demo: pie menu

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

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"

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

サイトのキャプチャ

Documentation

sponsors

top of page

©2024 coliss