jQueryで要素をランダムにフェードインで表示させる方法

画像表示をフェードインさせることで、そのWebサイトの印象はがらりと大きく変わります。ここでは、実装が簡単で使う機会が多そうな、「champagne.js」を紹介します。リストの要素等をランダムな順番でフェードイン表示をさせる事が出来ます。インパクトのあるサイト作りに活躍しそうです。

 

「champagne.js」を実装して要素をランダムにフェードイン表示させる手順。

前提として、ランダム表示させたい要素をlistタグでリスト化しておきます。

例)

[html]
<ul>
<li>"ここにランダム表示させたいテキストor画像"</li>
<li>"ここにランダム表示させたいテキストor画像"</li>
<li>"ここにランダム表示させたいテキストor画像"</li>
<li>"ここにランダム表示させたいテキストor画像"</li>
</ul>
[/html]

手順1. こちらの公式サイトからファイルをダウンロードします。

画面上部に紫色のボタンで「Download from Github」と書いてあるところをクリックするとダウンロードできます。

手順2. ダウンロードしたフォルダの中にある「champagne.js」のフォルダを丸ごとコピーし、実装したいページと同じ階層に保存します。

ダウンロードしたフォルダの中にはdemoのサンプルファイル等も含まれています。それらは必要ないので、champagneフォルダだけをコピーし、ページの階層へ放り込みます。

手順3. jQueryのライブラリと手順2で保存した「champagne.js」フォルダの中のファイルを読み込むコードを記入します。

下のコードをそのまま貼付ければOKです。

[html]
<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>
<script type="text/javascript">
$(function() {
$("ul.champagne").champagne();
});
</script>
[/html]

手順4. 最後に、ランダム表示させたいlist要素のulタグに「champagne」というクラス名をつけます。

[html]
<ul class="champagne">
<li>"ここにランダム表示させたいテキストor画像"</li>
<li>"ここにランダム表示させたいテキストor画像"</li>
<li>"ここにランダム表示させたいテキストor画像"</li>
<li>"ここにランダム表示させたいテキストor画像"</li>
</ul>
[/html]

これで完了です。記入するコードも少なく、ほとんどコピー&ペーストで実装する事が出来ました。 簡単ですね。

Leave a Comment.