【jQuery】画像を1枚ずつ順番にフェードイン表示させる方法

サイト内で画像をたくさん並べている場面はよくあると思いますが（ギャラリーページなど）、ただ画像が並んでいるだけだとつまらないですよね。

そこで今回は、画像を1枚ずつ順番にフェードイン表示させる方法をお伝えします。

DEMOはこちら

↓スクロールしてください↓

実装方法

以下のHTMLとCSSを用意します。

HTML

<div>
	<img src="sample.jpg" class="fadein">
	<img src="sample2.jpg" class="fadein">
	<img src="sample3.jpg" class="fadein">
</div>

CSS

.fadein {
  opacity : 0;
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
}

jQuery

$(function(){
	$(window).scroll(function (){
		$('.fadein').each(function(){
			var position = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > position - windowHeight + 200){
				$(function(){
					$('.fadein').each(function(i){
						$(this).delay(i * 200).queue(function(){
							$(this).addClass('active');
						});
					});
				});
			}
		});
	});
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

ただ、8行目から14行目以外は以下の記事とほぼ同じなので、同じ部分は今回は省力します。

9行目

.each()で、「.fadein内の要素」1つずつに順番に処理を行うということを指定します。

画像リストのインデックス番号を受け取るために、実行する関数に引数（i）を指定します。

$('.fadein').each(function(i){
    //　ここに処理内容を記述
});

10・11行目

.delay()でインデックス番号かける0.2秒づつずらしながら、.activeを追加します。

1番目の画像はインデックス0番なので、0×100で0秒後。2番目はインデックス1番なので、1×200で0.2秒後に処理開始・・・となります。

addClass()をdelay()で遅延させる為に、queue()を使います。

$(this).delay(i * 200).queue(function(){
	$(this).addClass('active');
});

まとめ

いかがでしたでしょうか？

アレンジ次第で色んな見せ方ができるので、実際のWEB制作でも試しに使ってみてください。