画像の一覧など画面上にコンテンツ要素をたくさん並べられたWebページでは
ページのロード時に順々に要素を読み込んでアニメーション表示したり
見せ方を変えることで様々な印象を与えているWebサイトをよく見かけます。

そういったコンテンツ要素が一覧で並べられたページで
要素を簡単にランダムでフェードアニメーション表示させることができる
jQueryプラグイン「champagne.js」がとても便利そうだったのでご紹介。

champagne.js | fresh tilled soil


champagne.js | fresh tilled soil

使い方もとても簡単で、
まずHTML側ではベースとなるコンテンツ要素に
任意のクラス(「.champagne」とします)をつけて、
ランダムで表示させたい各要素を並べます。

<ul class="champagne">
<li><img src="img/image1.jpg" /></li>
<li><img src="img/image2.jpg" /></li>
<li><img src="img/image3.jpg" /></li>
<li><img src="img/image4.jpg" /></li>
<li><img src="img/image5.jpg" /></li>
</ul>

「champagne.js」側で子要素となるコンテンツに対して
一つ一つ<div class=”hidden”></div>で囲われる仕様になっているので
CSS側でひとまずこれらの要素に対して非表示する指定を加えておきます。

◆CSS
.champagne div.hidden {
	display: none;
}

そしてjQueryファイルと併せて、
プラグインファイル「jquery.champagne.js」をページ内に読み込ませて
スクリプトを実行させます。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.champagne.js"></script>
<script type="text/javascript">
$(function(){
	$("ul.champagne").champagne();
});
</script>

オプションでは
————————————————————————————————
・beginning_delay → アニメーション開始までの時間
・delay_between → ランダム表示の間隔
・duration → フェードアニメーションのスピード
・onFinish → すべて表示完了した時の処理
————————————————————————————————
などもカスタム・追加できるようです。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.champagne.js"></script>
<script type="text/javascript">
$(function(){
	$('ul.champagne').champagne({
		beginning_delay: 1000,
		delay_between: 500,
		duration: 1000,
		onFinish:function(){
			alert("アニメーション終了");
		}
	});
});
</script>

ランダム表示させるコンテンツ要素は、画像でもテキストでも可能になっています。

コンテンツ一覧をとても簡単にランダム表示を実装できるので
便利に活用できそうです。

jQueryでランダム表示する際にぜひ。。。