JavaScript

リストなど複数の要素をランダムにフェードで表示していく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>

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

フリー&プレミアムのお天気アイコン前のページ

WordPressでFacebookのOGP設定ができるプラグイン「Open Graph Pro」次のページ

関連記事

  1. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  2. JavaScript

    アニメーション付きの水平・垂直プログレスメーターを実装できる「jQMeter」

    jQMeterはアニメーションが付いた水平・垂直のプログレスメーターを…

  3. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  4. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

  5. no-image
  6. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ペットボトルホルスター
  2. SRS-XB43
  3. Nu:kin

アーカイブ

PAGE TOP