[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu

使いどころが難しいですが、サークル状に広がるさまざまなアニメーションを備えたナビゲーションのjQueryのプラグインを紹介します。

デモのキャプチャ

Circle Menu

Circle Menuのデモ

デモでは、7種類の動きが楽しめます。

デモのキャプチャ

デモページ: Corners

四隅からくるくるっと回転します。

デモのキャプチャ

デモページ: Sides

側面からくるくるっと回転します。

デモのキャプチャ

デモページ: Sides, Half Circle

側面から半円状に回転します。

デモのキャプチャ

デモページ: Full, Click to Open

クリックするとくるくるっと回転します。

デモのキャプチャ

デモページ: Full, Spins Open

ダイナミックにスピンします。

デモのキャプチャ

デモページ: Timing

順番にサークル状に表示します。

デモのキャプチャ

デモページ: Timing, Reversed

上のデモでの逆順です。

Circle Menuの使い方

HTML

各アイテムはリスト要素です。

<ul>
	<li><a href="#">+</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>

外部ファイル

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jQuery.circleMenu.js"></script>

JavaScript

jQueryのセレクタでナビゲーション(ul)を指定し、動作の設定をします。

$('ul').circleMenu({
	item_diameter: 40,
	circle_radius: 100,
	direction: 'bottom-right'
});

スクリプトのオプション

angle
アイテムが回転する角度
circle_radius
中心からアイテムまでの半径
delay
トリガーとなるホバー時からの遅延時間
direction
アイテムが動く方向
item_diameter
アイテム間の直径
speed
アニメーションのスピード
step_in
アイテムが中心に入るステップ数
step_out
アイテムが中心から出るステップ数
transition_function
エフェクトの設定
trigger
トリガーの設定

top of page

©2017 coliss