Pop Circle

クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。

中央の円(トリガー)をクリックすると、それを囲む様にメニューが飛び出します。メニューの飛び出す方向は、円状の、半円、1/4円に変更することが出来ます。

まずはサンプルをご覧下さい。

→ メニューが飛び出すjQueryプラグイン「Pop Circle」サンプル


アニメーションするスピードや飛び出すときの効果などもカスタマイズできます。

メニューに使うのもよし、イメージギャラリーにするのもよし、アイデア次第ではサイトにユニークな演出を与えることができそうです。

設置方法は続きをご覧下さい。


【使用方法】
まずはこちらのサイトからjQueryプラグインをダウンロードします。
http://popcircle.vinmein.com/

<head>部分にJavaScriptを指定します。

続いてCSSも記述します。

これで準備は完了です。

最後に<body>部分にhtmlを記述しましょう。

オプションは以下のようになっています。

● spacing … トリガーとポップ画像との間の空白です。ピクセルで設定します。
● type … full,half,quad の中から選択します。それぞれ、全円、半円、1/4円です。
● offset … <li>要素で設定されているポップ画像をどの位置から始めるかを設定するパラメータのようです。開始位置は次のようになっています。
circle

● ease … アニメーションタイプを設定します。
‘easeInQuad’,’easeOutQuad’,’easeInOutQuad’,
‘easeInCubic’,’easeOutCubic’,’easeInOutCubic’,
‘easeInQuart’,’easeOutQuart’,
‘easeInOutQuart’,’easeInQuint’,’easeOutQuint’,
‘easeInOutQuint’,’easeInSine’,’easeOutSine’,
‘easeInOutSine’,’easeInExpo’,’easeOutExpo’,
‘easeInOutExpo’,’easeInCirc’,’easeOutCirc’,
‘easeInOutCirc’,’easeInElastic’,’easeOutElastic’,
‘easeInOutElastic’,’easeInBack’,’easeOutBack’,
‘easeInOutBack’,’easeInBounce’,’easeOutBounce’,
‘easeInOutBounce’

● time … アニメーションのスピード。fast,slow または ミリ秒で設定します。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: