[JS]木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy

画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。

Windy: A Plugin for Swift Content Navigation
Windy -GitHub

• Windyのデモ
• Windyの使い方

Windyのデモ

デモは3パターンあります。
この気持ちいいアニメーションを是非お楽しみください！

Demo 1: デフォルトのアロータイプのナビゲーション

Demo 2: アニメーションの範囲を広げたタイプ

Demo 3: jQuery UI Sliderを使ったタイプ

Windyの使い方

Step 1: 外部ファイル

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.windy.js"></script>

Step 2: HTML

コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。

<ul id="wi-el" class="wi-container">
	<li>
		<img src="images/demo1/1.jpg" alt="image1"/>
		<h4>Coco Loko</h4>
		<p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
	</li>
	<li> <!-- ... --> </li>
	<li> <!-- ... --> </li>
	<li> <!-- ... --> </li>
	<!-- ... --> 
</ul>

Step 3: JavaScript

各パネルを内包するul要素をjQueryのセレクタで指定し、スクリプトを実行します。

$( '#wi-el' ).windy();

スクリプトのオプション

スクリプトのオプションでは、トリガーのセレクタやアニメーションを設定できます。

$.Windy.defaults = {
	// if we want to specify a selector that triggers the next() function. Example: '#wi-nav-next'.
	nextEl : '',
	// if we want to specify a selector that triggers the prev() function.
	prevEl : '',
	// rotation and translation boundaries for the items transitions
	boundaries : {
		rotateX : { min : 40 , max : 90 },
		rotateY : { min : -15 , max : 15 },
		rotateZ : { min : -10 , max : 10 },
		translateX : { min : -200 , max : 200 },
		translateY : { min : -400 , max : -200 },
		translateZ : { min : 250 , max : 550 }
	}
};