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

サイト構築 -JavaScript

Post on:2012年10月10日

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 }
	}
};