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

公開日:  最終更新日:2015/11/16

要素をランダムにフェードイン ページのアクセントに使える「jquery.randomFadeIn.1.2.js」
バナーをたくさん配置したり、商品の画像を表形式にしているのはよく見かけますよね。そんなショップページの特定のエリアを目立たせたいとか、印象を変えたいとかありませんか?

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

スポンサードリンク

実装方法について

動作デモ 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);

動作サンプル


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


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




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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

楽天市場向け無料ツール

Your Message

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

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

スポンサードリンク

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

PAGE TOP ↑