[JS]並べて配置したパネルを滑らかなアニメーションで伸縮させるスクリプト -Kwicks for jQuery
Post on:2012年10月22日
sponsors
水平・垂直に配置したパネルをイージングやバウンドなどの滑らかなアニメーションで伸縮させるjQueryのプラグインを紹介します。
Kwicksは元来、MooToolsのエフェクトでしたがjQuery用にし、アニメーションのスムーズさ、コントロール、イベントのインタラクションなどを改善するために今回ゼロからリライトされました。
Kwicksのデモ
デモでは6種類のKwicksの動作を楽しめます。
対応ブラウザは、IE7+, Firefox3.6+, Chrome12+, Safri5+, Opera11+です。
パネルを水平方向に配置したデモです、ホバーしたパネルがアニメーションで伸びます。
垂直方向に配置したデモです。水平も面白いですが、垂直のアニメーションは新鮮さがあります。
Kwicksではアニメーションのエフェクトをセットできます。このデモでは「easeOutBounce」イージングして最後にバウンドします。
ユーザーの操作無しで自動でパネルが伸縮するスライドショータイプのデモです。
伸びたパネルのみスタイルを適用することもできます。デモでは伸びたパネルにアニメーションでカラーを変更しています。
カーソルがポインタになっているのに注目してください。今まではリスト要素で実装されたパネルでしたが、あらゆる要素で実装が可能です。デモはa要素です。
Kwicksの使い方
Step 1: 外部ファイル
head内に当スタイルシートを記述します。
<head> <link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' /> </head>
</body>の上に、「jquery.js」と当スクリプトを記述します。
<body> ... ... <script src='js/jquery-1.8.1.min.js' type='text/javascript'></script> <script src='../jquery.kwicks.js' type='text/javascript'></script> </body>
Step 2: HTML
各パネルはリスト要素で実装します。
コンテナのclassに「kwicks」とパネルの配置方向「kwicks-horizontal」を指定します。
<ul class='kwicks kwicks-horizontal'> <li id='panel-1'></li> <li id='panel-2'></li> <li id='panel-3'></li> <li id='panel-4'></li> </ul>
要素はリスト要素でなくても構いません。
<div class='kwicks kwicks-horizontal'> <a href='#' id='panel-1'></a> <a href='#' id='panel-2'></a> <a href='#' id='panel-3'></a> <a href='#' id='panel-4'></a> </div>
Step 3: JavaScript
jQueryのセレクタでコンテナを指定し、スクリプトを実行します。
<script type='text/javascript'>
$(function() {
$('.kwicks').kwicks(opts);
});
</script>
「opt」はオプションで次の設定を行えます。
- size
- 伸縮に関わらずパネルの全体のサイズ（幅 or 高さ）
- max|min
- 各パネルの伸縮時の最大・最小幅 or 高さ
- spacing (Default: 5)
- 各パネル間の溝
- duration (Default: 500)
- アニメーションの持続時間
- isVertical (Default: false)
- パネルが垂直にアレンジされるかどうか
- easing (Default: none)
- アニメーションのエフェクトの種類（要：jQuery Easing Plugin）
- behavior (Default: none)
- 使用可能なビヘイビア
オプションを使用すると、下記のようになります。
<script type='text/javascript'>
$(function() {
$('.kwicks').kwicks({
size: 125,
maxSize : 250,
spacing : 5,
behavior: 'menu'
});
});
</script>
sponsors
