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

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

使用方法 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>

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

sponsors

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

記事作成:
記事URL:

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