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

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

 

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

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

例)

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

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

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

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

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

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

下のコードをそのまま貼付ければOKです。
<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>
手順4. 最後に、ランダム表示させたいlist要素のulタグに「champagne」というクラス名をつけます。
<ul class="champagne">
	<li>"ここにランダム表示させたいテキストor画像"</li>
	<li>"ここにランダム表示させたいテキストor画像"</li>
	<li>"ここにランダム表示させたいテキストor画像"</li>
	<li>"ここにランダム表示させたいテキストor画像"</li>
</ul>
これで完了です。記入するコードも少なく、ほとんどコピー&ペーストで実装する事が出来ました。 簡単ですね。