写真のギャラリーページなど、たくさんの画像が一覧となって並べられているページでの
ページロード時に画像が一枚ずつ順番にフェードインしながら表示される演出技法。

一度に全ての画像がフェードインするよりも
滑らかな読み込みアニメーションを演出することができます。

この画像(コンテンツ要素)が順番にフェードインしながら表示する演出を
jQueryを使って簡単シンプルに実装する方法を紹介してみます。

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

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

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

ページの読み込みが終わると
一覧画像が左上から順々にフェードインして表示されます。

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

◆HTML
<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>

サンプルではソースもシンプルにするために
単純なリストで画像を25個ほど並べています。

画像一つ一つはリスト<li>で囲っており、
実際はこのリスト<li>一つ一つをフェードインさせる構成になります。

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

◆CSS
ul {
	margin: 0 auto;
	width: 550px;
	text-align: left;
}

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

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

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

順々にフェードインさせることになる
リスト<li>は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(){
	$(window).load(function(){
		var delaySpeed = 100;
		var fadeSpeed = 1000;
		$('ul li').each(function(i){
			$(this).delay(i*(delaySpeed)).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
		});
	});
});
</script>

jQueryのエフェクト「.delay()」を使って
画像(コンテンツ要素)の読み込み時間を遅延させます。

「.delay()」後は「.fadeIn()」などを使ってフェードインさせる方法で可能ですが
「.animate()」を使うようにしておくと、フェード処理以外の演出も簡単に追加することができるので
あえてこの形にしてあります。

スクリプト開始部分にある
—————————————
var delaySpeed = 100;
var fadeSpeed = 1000;
—————————————
は上から
—————————————
・読み込みの遅延時間
・表示時のアニメーション(フェード)時間
—————————————
となっているので、
ここの値を変更することでそれぞれスピードなど調整することが可能です。

この様に「.delay()」エフェクトを使うことで簡単シンプルに
一覧画像を順々に読み込ます演出を簡単に実装することができるようになります。

ギャラリーページやポートフォリオページなどの一覧画面で是非。。。

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

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

Related Posts

Comments (11)

  • jQuery使って画像にキャプションをオーバーレイ | 自然体 | 2012.08.17 17:37

    [...] 、jQueryで画像などコンテンツ要素を順番にフェードインさせる方法を参考に、 [...]

  • 要素を順番にフェードイン | 新人デザイナーの覚え書きサイト | 2013.02.09 16:44

    [...] ↓参考にしたサイト jQueryで画像などコンテンツ要素を順番にフェードインさせる方法 [...]

  • うひょー | 2014.06.01 20:49

    こんばんは。
    参考になります。
    ひとつ質問したいのですが、

    animationの後にfunction(){で別の要素に何かをさせようとすると、最初の画像が消えた直後?に動作しはじめてしまいます。最後の画像が消えてから動作させるにはどう記述すればいいでしょうか?

    よろしくお願いします。

  • BlackFlag | 2014.06.03 1:26

    >うひょーさん
    コメントありがとうございます。
    このdelayフェードインスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    すべての要素の読み込みが完了したら何かアクションを起こす、
    ということでよろしいでしょうか。

    現状のスクリプトを改修というよりかは
    要素数とフェード遅延時間を計算して
    setTimeoutを使った遅延処理を追加する形が
    手軽かと思っております。

    参考までにsetTimeout使って要素数とフェード時間を計算して
    すべての読み込みが完了した時間にアラートを出すサンプルを用意しました。
    http://black-flag.net/devel/jQueryDelayLoad/jQueryDelayLoadComplete/

    ファイルのダウンロードが必要な場合は下記URLをクリックしてください。
    http://black-flag.net/devel/jQueryDelayLoad/jQueryDelayLoadComplete.zip

    こちらで一度お試しいただければと思います。
    よろしくお願いします。

  • うひょー | 2014.06.04 13:09

    setTimeoutというものがあったんですね。
    これで想定通りに動かせることができました。
    ありがとうございました。

  • 社会の歯車 | 2014.09.02 14:13

    使わせていただきます。ちなみに商用です。
    助かりました。

  • BlackFlag | 2014.09.04 1:35

    >社会の歯車さん
    コメントありがとうございます。
    当記事のスクリプトがお役に立ったようで
    嬉しく思っております。

    他にもいろいろと紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。

  • hirayama | 2015.01.28 11:00

    参考にさせて頂きました。
    質問ですが、表示された画像をlightboxで開くことは可能ですか?
    教えてください。

  • BlackFlag | 2015.02.03 1:12

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

    LightBoxとの併用も可能です。
    実行させるタイミング等をLightBox側のスクリプトと調整してみてください。

    よろしくお願いします。

  • kawa | 2016.03.26 12:53

    こんにちは。質問なのですが、こちらのような要素を順番に表示するというものを、スクロールして画面内に入ってからはじめる、という風にするのはどうすればいいでしょうか…?
    よろしければお答えいただければ幸いです。よろしくお願いいたします。

  • BlackFlag | 2016.04.02 10:55

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

    スクロールして要素が画面内に入った際になにか処理を実行させるには
    当ブログ別記事の

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

    こちらで可能になるかと思います。

    当記事のdelayスクリプトはページをロードした際に実行されるようになっているので
    そのスクリプト全体を関数にして、上記の記事の動作で特定の位置にスクロールされた際に
    関数が実行されるようにすれば実現できるのではないかと思います

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







コメント内容

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

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner