【jQuery】リストの遅延表示

※ 当サイトではアフィリエイト広告を利用しています。

リスト形式のものを、スクロールするごとに少しずつ表示させていく方法です。

※サンプルはこちら

HTMLはこちら。

<ul class="delay">
     <li><img src="./assets/images/img_01.jpg" alt=""></li>
     <li><img src="./assets/images/img_02.jpg" alt=""></li>
     <li><img src="./assets/images/img_03.jpg" alt=""></li>
     <li><img src="./assets/images/img_04.jpg" alt=""></li>
</ul>

jsはこちら。

var delay = $('.delay');
var delayList = delay.children('li');
delayList.css('opacity', '0');
$(window).scroll(function () {
	$(delay).each(function () {
		var offset = $(this).offset().top;　// ページ最上部からul.delayまでの距離を取得
		var scroll = $(window).scrollTop(); 　//スクロール量を取得
		var windowHeight = $(window).height();　//ウィンドウの高さを取得
		if (scroll > offset - windowHeight + 100) {　//ul.delayが画面内に入って少ししてから
				$(this).children('li').each(function(i){$(this).delay(500*i).animate({opacity:1}, 500)});
		}　//li要素を5秒間隔で遅延表示
	});
});

サンプルでは単純に縦並びにしましたが、横に並んだリスト形式のものを順番にひとつずつ表示させたいときなどに使うことが多いです。お試しください！