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. jQuery Floating Social Share
  2. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  3. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  4. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  5. jquery.confirmDialog
  6. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP