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. HCaptions

    JavaScript

    ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCapti…

    指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ…

  2. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのfocusとblurを使えばフォームが便利になる

    jQueryのfocusとblurを使えばフォームを便利にすることがで…

  4. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  5. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  6. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

コメント

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

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

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP