randomFadeIn.1.2.js 要素をランダムフェードイン表示

公開日：2013/08/24 最終更新日：2022/08/27

バナーをたくさん配置したり、商品の画像を表形式にしているのはよく見かけますよね。そんなショップページの特定のエリアを目立たせたいとか、印象を変えたいとかありませんか？最初に表示する時のオープニング的な感じで画像が1つずつフェードインして表示されていく感じをイメージしてみてください。

本日はページのアクセントに使えそうな要素をランダムにフェードイン表示する方法について調べてみたので紹介したいと思います。

ランダムにフェードインしながら画像などを表示させる方法

スクリプトなどを自分で書くのも大変なので、探してみた所jQueryプラグインに便利なものが見つかったので、それを使って実装してみます。記述自体もそれほど難しくありませんので、ぜひチャレンジしてみてください。

実装方法について

~~動作デモ~~ H27.11.16 リンク切れのため削除
ダウンロード ←から、ファイル一式をダウンロードしてください。
ダウンロードしたファイルの中の「jquery.randomFadeIn.1.2.js」を使用します。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

サンプルソース sample.html

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.randomFadeIn.1.2.js"></script>
 
<style>
#boxset {
   width:600px;
}
 
#boxset div {
   width:120px;
   height:100px;
   float:left;
   overflow:hidden;
   margin-right:8px;
   margin-bottom:8px;
}
 
#boxset div p {
   margin:0;
   color:#000;
   width:100%;
   height:100%;
   display:none;
   padding-top:14px;
   text-align:center;
   box-sizing:border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
}
</style>
 
<div id="boxset">
   <div>
      <p>
         <a href="リンク先URL" target="_top"><img src="画像のURL"></a>
      </p>
   </div>
 
　　[・・・省略・・・]
    必要な数だけ<div><p>・・・・・</p></div>を記述する
    [・・・省略・・・]
 
   <div>
      <p>
         <a href="リンク先URL" target="_top"><img src="画像のURL"></a>
      </p>
   </div>
</div>
 
<script type="text/javascript">
   jQuery(document).ready(function($) {
      $('#boxset').randomFadeIn();
   });
</script>

1、2行目ダウンロードした２つのファイルを読み込みんでいます。
(GOLD内にアップするのを忘れないでください。また、パスも環境に合わせて変更してください)

4行目～32行目でCSSで見た目の調整をしています。
全体の幅、要素の幅、高さなどこちらで微調整することが出来ます。

34行目～50行目でランダムに表示したい要素を記述しています。
全体を＜div id=”boxset”＞＜div＞で囲みます。

次にその内側に表示したい数分＜div＞＜p＞表示内容＜/p＞＜/div＞を記述
表示内容の部分については、自由に設定することが出来ます。サンプルでは画像、リンク等設定しています。

自由に出来るので商品画像、商品名、価格などをレイアウトして商品ページへのリンクなど設定しても良いかもしれません。

52行目～56行目がランダム表示を実行している部分になります。
サンプルでは $(‘#boxset’).randomFadeIn(); としていますが、表示間隔、繰り返しなどの設定をすることも可能です。

■表示間隔の指定
$(‘#boxset’).randomFadeIn(‘slow’);
$(‘#boxset’).randomFadeIn(‘fast’);
$(‘#boxset’).randomFadeIn(1000); →1秒：1000

■繰り返し表示をしたくない場合は下記のように記述します。
$(‘#boxset’).randomFadeIn(1000, false);