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>

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

関連記事

  1. Yet Another Ripple Plugin
  2. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

  3. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  4. plainModal

    JavaScript

    カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」

    plainModalはシンプルでカスタマイズ性が高いモーダルウィンドウ…

  5. JavaScript

    いろんなデザインのツールチップを実装できる「Opentip」

    Opentipはいろんなデザインのツールチップを実装することができるJ…

  6. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

コメント

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

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

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP