要素をランダムにフェードインさせていくjQueryプラグイン「champagne.js」
そんな時は徐々にフェードインさせてみてはいかがでしょうか?
champagne.jsはランダムに要素をフェードインさせてくれます。
sponsors
使用方法
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」サンプル
sponsors
記事作成:2012年5月22日 09:46
記事URL:http://www.skuare.net/2012/05/jquerychampagnejs.html
TOP > javascript > その他 > 要素をランダムにフェードインさせていくjQueryプラグイン「champagne.js」
前の記事:FacebookのOGPをページ内で確認するブックマークレット(雑)
次の記事:画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」
あなたにはこちもお勧め!
jQuery プラグインまとめ!