以前の記事で「jQueryで画像などコンテンツ要素を順番にフェードインさせる方法」と題して、
一覧となって並べられた画像をjQueryを使って順々にフェードインさせる方法を紹介しましたが、
同様のパターンで、フェードインさせる順番をランダムにするパターンを
できるだけシンプルな構成で作ってみたので紹介してみます。

jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法

まずは動作のサンプルから。
下記画面の「リロード」を押してみてください。

サンプルを別枠で表示する

ページの読み込みが終わると
一覧画像がランダムによって順々にフェードインして表示されます。

この全体構成について、
まずはHTMLから。

◆HTML
<div id="thumblist">
<ul>
<li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo2.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo3.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo4.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo5.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo6.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo7.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo8.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo9.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo10.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo11.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo12.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo13.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo14.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo15.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo16.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo17.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo18.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo19.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo20.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo21.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo22.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo23.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo24.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/photo25.jpg" alt="" /></a></li>
</ul>
</div><!--/#thumblist-->

任意のID要素で<ul>リストを囲い
<li>リストで画像を25個ほど並べています。

画像一つ一つはリスト<li>で囲っており、
サンプルではこのリスト<li>の中の<img>を
一つずつをフェードインさせる構成にしています。

そしてこのHTMLソースに対してのCSSは以下の様に。

◆CSS
#thumblist {
	width: 550px;
}

ul {
	margin: 0 auto;
	width: 550px;
	text-align: left;
}
ul li {
	margin: 5px;
	width: 100px;
	height: 100px;
	text-align: left;
	float: left;
	overflow: hidden;
}
ul li img {
	display: none;
}

/* =======================================
	ClearFixElements
======================================= */
ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

ul {
	display: inline-block;
	overflow: hidden;
}

順々にフェードインさせる対象となる
画像<img>にはCSS側で「display:none」を入れておく必要があります。

その他は特に重要な項目もなく、
サンプル画面用のレイアウトを形成する内容になっています。

そして実際の動作実行用のスクリプトは以下の様になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	var setElm = $('#thumblist img'),
	delaySpeed = 100,
	fadeSpeed = 500;

	$(window).load(function(){
		randomShow();
		function randomShow(){
			var elmLength = setElm.length,
			randomSet = Math.floor(Math.random()*elmLength);

			$(setElm[randomSet]).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
			setElm.splice(randomSet,1);

			if (elmLength > 0) {
				setTimeout(function(){randomShow();},delaySpeed);
			} else {
				return false; //全てロード終了後に処理を加える際はココに
			}
		}
	});
});
</script>

スクリプト開始部分にある
——————————————————
var setElm = $(‘#thumblist img’),
delaySpeed = 100,
fadeSpeed = 500;
——————————————————
が上から
——————————————————
・フェードインさせる対象となる要素
・読み込みの遅延時間
・表示時のアニメーション(フェード)時間
——————————————————
となっているので、この部分の値を変更することで、
それぞれスピードなど調整することが可能となっています。

スクリプトでは「setElm」に入れた対象要素の数を数えて表示順をランダムで設定し、
個数分「randomShow()」functionを実行させています。

フェードイン動作では「.fadeIn()」を使う方がシンプルではありますが
「.animate()」を使うようにしておくことで、
フェード処理以外のちょっとしたアニメーション演出も
簡単にカスタム追加することができるかと思うので
あえてこの形にしてあります。

スクリプト構成については以下のプラグインを参考にしてあります。

【参考プラグイン】画像などコンテンツ要素をランダムでフェードインさせることができるjQueryプラグイン「champagne.js」

ランダム表示の応用として、
ページに並べられる<li>リストの順序もランダムにシャッフルして
さらにフェードインの順番もランダムにするパターンも作ってみたので併せて紹介してみます。

【応用?】jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法

まずは動作のサンプルから。
下記画面の「リロード」を押してみてください。

サンプルを別枠で表示する

リロードするごとに<li>の並びをランダムで入れ替えて
フェードインさせる順序もランダムで表示されます。

構成に関して、HTMLとCSSは先のものと同じで
スクリプトのみ追記になってます。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	// リストのランダム並べ替え
	var rdmList = $('#thumblist ul li'),
	listParent = $('#thumblist ul'),
	array = [];

	rdmList.each(function(){
		array.push($(this).html());
	});
	array.sort(function() {
		return Math.random() - Math.random();
	});
	listParent.empty();
	for(i=0; i < array.length; i++) {
		listParent.append('<li>' + array[i] + '</li>');
	}

	// リストのランダム表示
	var setElm = $('#thumblist img'),
	delaySpeed = 100,
	fadeSpeed = 500;

	$(window).load(function(){
		randomShow();
		function randomShow(){
			var elmLength = setElm.length,
			randomSet = Math.floor(Math.random()*elmLength);

			$(setElm[randomSet]).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
			setElm.splice(randomSet,1);

			if (elmLength > 0) {
				setTimeout(function(){randomShow();},delaySpeed);
			} else {
				return false; //全て終了後に処理を加える際はココに
			}
		}
	});
});
</script>

スクリプト開始部分にある
——————————————————
var rdmList = $(‘#thumblist ul li’),
listParent = $(‘#thumblist ul’),
——————————————————
が上から
——————————————————
・ランダムで位置を入れ替える要素
・ランダムで位置を入れ替える要素の親要素
——————————————————
となっているので、実装する際の構成によって
この部分の変更が必要になります。

<ul><li>構成ではなく
親要素が任意のIDの付いた<div>で
子要素がその中に入る<div>、という構成でも可能です。
【例】————————————————
var rdmList = $(‘div#thumblist div.child’),
listParent = $(‘div#thumblist’),
——————————————————

ランダムでの入れ替えは以下の記事を参考にさせていただきました。

【参考記事】要素をランダムに並び替える

この様に要素をランダムでフェードインさせることで
サイトに派手目な印象を加えることができるかと思います。

トップページのキービジュアルやギャラリーページやポートフォリオページなどでの魅せ方に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

SHARE

Comments (13)

  • yuro | 2013.03.29 14:43

    いつもながら、参考になります。
    ありがとうございます。
    このサイトのおかげで会社の楽天hpの画像フェードイン、アウトの
    仕組を作成することができました。
    社内でもかなり評判がよくて、プロ扱いされています。
    大変感謝しております。
    皆にここが非常にいいサイトだと宣伝させてもらいました。
    今後とも参考にさせてもらいますので、よろしくお願いします。

  • BlackFlag | 2013.04.01 0:17

    >yuroさん
    コメントありがとうございます。

    このランダムフェードスクリプトを
    ご活用いただいているようで嬉しく思っております。

    その様なお言葉をいただけると
    とても嬉しく励みになります。

    これからもシンプルで使い易いスクリプトを
    心掛けて更新していきますので
    今後ともよろしくお願いします。

  • a_kuroo | 2014.08.24 23:18

    black-flag様

    いつも参考にさせていただいてます。ありがとうございます。

    質問なのですが、”jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法”を
    レスポンシブ対応にさせることは可能でしょうか?

    もし、実現できるようであればお教えいただけますと助かります。
    よろしくお願い申し上げます。

  • BlackFlag | 2014.08.26 1:04

    >a_kurooさん
    コメントありがとうございます。
    当記事のランダムフェードスクリプトを
    ご検討いただいているようで嬉しく思っております。

    レスポンシブの件ですが
    当記事のスクリプトは要素に対して幅や高さなどの指定は特にしていないので
    レスポンシブ動作には影響しないものだと思っております。

    CSS側でメディアクエリーを使って
    レイアウトを調整することで実現可能なのではないでしょうか。

    お試しください。
    よろしくお願いします。

  • a_kuroo | 2014.08.26 14:42

    black-flag様

    こんんちは。
    お忙しい中、質問にお答えいただいてありがとうございます。

    さっそくメディアクエリを使ってトライしてみます。
    これからもよろしくお願いいたします。

  • AAA | 2015.03.06 19:57

    black-flag様

    こんにちは。
    いつも参考にさせていただいています。

    質問なのですが、
    ランダム表示しながら、処理をループさせるにはどのように記載すればよいでしょうか?

    当方初心者のため検索しても解決策を見つけられず困っています。

    よろしければ教えてください、お願いします。

  • BlackFlag | 2015.03.07 11:05

    >AAAさん
    コメントありがとうございます。
    当記事のランダムフェードスクリプトを
    ご検討いただいているようで嬉しく思っております。

    ご質問いただきました件についてですが
    実装されようとしている「処理をループさせる」とは
    何の処理をどうループさせることでしょうか…

    一旦表示されたものが全て消え、再度バラバラな状態で読み込みし直す、
    ということでしょうか…

    ご確認ください。
    よろしくお願いします。

  • AAA | 2015.03.07 16:17

    black-flag様

    ご返信ありがとうございます。

    説明不足で申し訳ありません。

    >一旦表示されたものが全て消え、再度バラバラな状態で読み込みし直す、
    >ということでしょうか…

     もし可能であれば、ランダムで一度すべて表示されてから、
     バラバラにランダムでフェードアウトしながら、またランダムで
     再度バラバラな状態で読み込みしなおすことは可能ですか?

    black-flag様のおっしゃったように、一旦表示されたものが全て消え、
    再度バラバラな状態で読み込みし直す方法でもかまいません。

    お時間ありましたら、ご教授のほどお願いします。

  • BlackFlag | 2015.03.12 1:29

    >AAAさん
    動作について、了解しました。

    実現しようとなるとスクリプト内の
    「リストのランダム並べ替え」としているところを適宜関数にして、
    「randomShow()」と同じ形でフェードアウト用の「randomHide()」みたいなものを作り
    スクリプトの38行目にあたる全て終了後に処理を実行させるところで
    フェードアウトさせる関数を実行させたり
    リストをランダムに並べ替えたり、フェードインさせたりする
    構成になるかと思っています。

    お試しください。
    よろしくお願いします。

  • こめ | 2018.02.15 18:40

    デモでは<li>リストを25個記載しておりますが、これを例えば5個のみ表示させるにはどうしたらよろしいでしょうか。
    どうしても解決できなくてご教示いただけましたら幸いです。

  • BlackFlag | 2018.02.17 11:54

    >こめさん
    コメントありがとうございます。
    当記事のランダムフェードスクリプトを
    ご活用いただいているようでうれしく思っております。

    ご質問いただきました件についてですが
    25個並べられたリストの中で5つだけランダムで表示する、ということでしょうか…?

    そのような場合はサンプルスクリプトの
    35行目の分岐を調整する形になります。

    例として、25個並べられたリストの中で5つだけランダムで表示する場合は
    35行目の分岐部分が
    —————————–
    if ((elmLength – 21) > 0) {
    —————————–
    といった記述になります。

    ご確認ください。
    よろしくお願いします。

  • 初心者です | 2019.12.31 17:41

     いつも参考にさせて頂いております。
     すみません、質問なんですが、こちらのランダムに画像をフェードする要素を、ロード時ではなくスクロールし、要素内に入った時に、フェードが開始するようにするにはどうすればよろしいでしょうか。

     JQueryに関しまして、まだまだ知識が浅く、当サイトのパララックスサイトのスクロールイベント発生の紹介内容も参考に  $(window).load(function(){ を  $(window).on(‘load scroll resize’,function(){ に書き換えてみたりといろいろコードを入れ替えてみたりとしてみたのですがうまくいきませんでした。

     もし、よろしければロード実行のコードから、スクロールしてアニメーション実行へ変更するコード内容を教えて頂ければ幸いです。
     大変お忙しい中すみません。

  • BlackFlag | 2020.01.13 19:44

    >初心者です さん
    コメントありがとうございます。
    返信が遅くなり失礼しました…

    当記事のスクリプトをご活用いただいているようで
    うれしく思っております。

    ご質問いただきました、
    スクロールして該当エリアに到達した時点で
    スクリプトを実行させる件についてですが
    記載していただいている通り、
    当ブログの下記のページのスクリプトと組み合わせることによって
    実装可能になります。

    ・jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験
    https://black-flag.net/jquery/20140128-4943.html

    組み合わせ方の動作については
    サンプルスクリプトを用意しましたので
    下記URLをご参考にしてみてください。

    https://black-flag.net/devel/jQueryRandomLoad/jQueryRandomLoadScroll/index.html
    https://black-flag.net/devel/jQueryRandomLoad/jQueryRandomLoadScroll/index2.html

    サンプルデータは下記URLにてダウンロードできます。

    https://black-flag.net/devel/jQueryRandomLoad/jQueryRandomLoadScroll/jQueryRandomLoadScroll.zip

    お試しください。
    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して