要素をランダムにフェードインさせていくjQueryプラグイン「champagne.js」

画像などの要素をただ並べていくだけだとなんだか寂しい。
そんな時は徐々にフェードインさせてみてはいかがでしょうか?
champagne.jsはランダムに要素をフェードインさせてくれます。

sponsors

使用方法

champagne.jsからファイル一式をダウンロード。
下記のように要素が記述されているとします。

<ul class="class名">
	<li><img src="画像パス"></li>
	<li><img src="画像パス"></li>
	<li><img src="画像パス"></li>
	<li><img src="画像パス"></li>
</ul>
これに対しCSSを適用。

.class名 div.hidden {
  display: none;
}
最後にJavaScriptを記述します。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.champagne.js"></script>
<script>
$(function(){
	$(".class名").champagne({
		beginning_delay: 600, //最初の要素までの時間
		delay_between: 200, //要素間の時間
		duration: 500, //フェードイン時間
		onFinish:function(){
			alert("おわり!"); //終わった時の処理
		}
	});
});
</script>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors