リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.js」

どこかで使う機会がありそうな感じのjQueryプラグイン「champagne.js」を使ってみました。これを使えばリスト化した要素などをランダムで次々と表示させていくことができます。ページを読み込んだ時にこんな感じで表示されると、とても印象的になりますね。ということで以下使い方です。

[ads_center]

使い方

ダウンロードした中にあるCSSファイルを使う場合は以下を読み込んでおきます。

<link rel="stylesheet" type="text/css" href="champagne/champagne.css" />

li要素で表示させたいテキストを記述していきます。

<ul class="champagne">
    <li>sample</li>
    <li>sample</li>
    <li>sample</li>
    ・
    ・
    ・
</ul>

jQuery本体とダウンロードしたプラグインを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="champagne/jquery.champagne.min.js"></script>

あとはランダムで表示させるためにchampagneをセットします。

<script type="text/javascript">
$(function() {
    $("ul.champagne").champagne();
});
</script>

オプション

オプションではスタート時の表示時間やフェードのスピードなんかを調整することができます。指定する場合はこんな感じで指定します。

<script type="text/javascript">
$(function() {
    $("ul.champagne").champagne({
        beginning_delay: 300, // スタートの開始時間
        delay_between: 50, // 各リストが表示される間隔
        duration: 500, // フェードで表示されるスピード
        onFinish: function() { // コールバック関数
            $('h1').animate({
                fontSize: "30px"
            });
        }
    });
});
</script>

ということで、使い方、オプション共にシンプルなのでとても使いやすいですね。以下のページからダウンロードできます。

champagne.js | fresh tilled soil