画像表示をフェードインさせることで、その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>
これで完了です。記入するコードも少なく、ほとんどコピー&ペーストで実装する事が出来ました。 簡単ですね。