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

公開日:  最終更新日:2018/03/17

要素をランダムにフェードイン ページのアクセントに使える「jquery.randomFadeIn.1.2.js」
バナーをたくさん配置したり、商品の画像を表形式にしているのはよく見かけますよね。そんなショップページの特定のエリアを目立たせたいとか、印象を変えたいとかありませんか?最初に表示する時のオープニング的な感じで画像が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行目 ダウンロードした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);

動作サンプル


※配置レイアウトはランダムには表示されません。
例)左上の画像は常に同じものが表示されます


最初に読み込まれた時に1回だけランダムに表示するなどすれば、同じ表示内容でも、ランダムフェードイン表示するだけで印象もかなり変わりますね。ページのアクセントにぜひ、試してみてください。

【ランダムに関する記事】




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑