[JS]シンプルながら大胆なアニメーションが面白い、パネルを開閉するスクリプト

表示サイズに応じてフレキシブルにレイアウトを変更するCSS3アニメーションを使ったパネルを開閉するアコーディオンを紹介します。

Flexible Slide-to-top Accordion

[ad#ad-2]

デモ

まずは、デモからご紹介。

デフォルトではパネルがずらっと配置されており、パネルをフォーカスするとアローがスライドのアニメーションで表示されます。

デモページ

各パネルをクリックすると、ページスクロールのアニメーションを伴って上部に移動し、コンテンツを開きます。

「About」のパネルを開いたキャプチャ

パネルのサイズは、表示サイズに合わせて変更されます。

幅：480pxで表示

開いたコンテンツのレイアウトも、同様に変更されます。

幅：480pxで表示

[ad#ad-2]

実装

HTML

各パネルはリスト要素で実装します。
リスト要素を内包するdiv要素のidとclassに「st-accordion」を付与します。

<div id="st-accordion" class="st-accordion">
	<ul>
		<li>
			<a href="#">
				Item Title
				<span class="st-arrow">Open or Close</span>
			</a>
			<div class="st-content">
				<p>Some content</p>
			</div>
		</li>
		<li> ... </li>
	</ul>
</div>

スクリプトのオプション

スクリプトのオプションでは、アニメーションの種類、スピードなどが設定できます。

$.Accordion.defaults 		= {
	// index of opened item. -1 means all are closed by default.
	open			: -1,
	// if set to true, only one item can be opened.
	// Once one item is opened, any other that is
	// opened will be closed first
	oneOpenedItem	: false,
	// speed of the open / close item animation
	speed			: 600,
	// easing of the open / close item animation
	easing			: 'easeInOutExpo',
	// speed of the scroll to action animation
	scrollSpeed		: 900,
	// easing of the scroll to action animation
	scrollEasing	: 'easeInOutExpo'
};

元記事では必要なファイルが一式でダウンロードでき、JavaScript, CSSの実装なども詳しく説明されています。

• Flexible Slide-to-top Accordion