skuare.net

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

使用方法 champagne.jsからファイル一式をダウンロード。
下記のように要素が記述されているとします。
<ul class="class名">
<li><amp-img src="画像パス"></li>
<li><amp-img src="画像パス"></li>
<li><amp-img src="画像パス"></li>
<li><amp-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>
要素をランダムにフェードインさせていくjQueryプラグイン「champagne.js」サンプル