以前の記事で「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’),
——————————————————

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

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

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

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (9)

  • 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行目にあたる全て終了後に処理を実行させるところで
    フェードアウトさせる関数を実行させたり
    リストをランダムに並べ替えたり、フェードインさせたりする
    構成になるかと思っています。

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







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR