[JS]並べて配置したパネルを滑らかなアニメーションで伸縮させるスクリプト -Kwicks for jQuery

水平・垂直に配置したパネルをイージングやバウンドなどの滑らかなアニメーションで伸縮させるjQueryのプラグインを紹介します。

サイトのキャプチャ

Kwicks for jQuery

Kwicksは元来、MooToolsのエフェクトでしたがjQuery用にし、アニメーションのスムーズさ、コントロール、イベントのインタラクションなどを改善するために今回ゼロからリライトされました。

Kwicksのデモ

デモでは6種類のKwicksの動作を楽しめます。
対応ブラウザは、IE7+, Firefox3.6+, Chrome12+, Safri5+, Opera11+です。

デモのキャプチャ

Kwicks Example: Horizontal

パネルを水平方向に配置したデモです、ホバーしたパネルがアニメーションで伸びます。

デモのキャプチャ

Kwicks Example: Vertical

垂直方向に配置したデモです。水平も面白いですが、垂直のアニメーションは新鮮さがあります。

デモのキャプチャ

Kwicks Example: Easing

Kwicksではアニメーションのエフェクトをセットできます。このデモでは「easeOutBounce」イージングして最後にバウンドします。

デモのキャプチャ

Kwicks Example: Slideshow

ユーザーの操作無しで自動でパネルが伸縮するスライドショータイプのデモです。

デモのキャプチャ

Kwicks Example: Panel Classes

伸びたパネルのみスタイルを適用することもできます。デモでは伸びたパネルにアニメーションでカラーを変更しています。

デモのキャプチャ

Kwicks Example: Anchor Markup

カーソルがポインタになっているのに注目してください。今まではリスト要素で実装されたパネルでしたが、あらゆる要素で実装が可能です。デモは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>

top of page

©2017 coliss