【jQuery】スクロールして複数の要素を時間差でフェードインさせる方法【2パターン】

2020/07/15 (更新日: 2022/05/25)

この記事の概要

Web制作者

スクロール時に時間差でテキストや画像を表示させたい。

管理人

jQueryで実装できます！詳しく紹介します。

本記事の内容

Webページスクロール時に複数の要素を時間差でフェードインさせる方法

Webページを見ている時に、複数のテキストや画像が順番に浮かび上がるような動きを見たことありますね？

この記事ではjQueryを使い、ブラウザ上で画面をスクロールして複数の要素を時間差でフェードインさせる方法を2パターンご紹介します。

2つの方法を紹介

.delay()、.queue()、dequeue()メソッドを使った方法
setTimeout()メソッドを使った方法

<head>内に記述

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

前提としてjQueryを<head>内に記述します。

それぞれの方法を具体的に見ていきましょう。

.delay()、.queue()、dequeue()メソッドを使った方法

「見出し→テキスト→画像」の順番で各要素が時間差でフェードインするように実装します。

イメージ

こんな感じに時間差でフェードインします。

ここから実装の方法をご紹介します。

HTML

<div class="fadein_block">
	<h2 class="fadein">見出し</h2>
	<p class="fadein">ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。<br>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
	<img src="【ファイルパス】" alt="" width="900" height="600" class="fadein" />
</div>

ここでは<h2>、<p>、<img>タグを設置します。すべて.fadeinクラスを付与しておきます。

CSS

.fadein {
	opacity: 0;
	transition: all 1000ms;
}
.fadein.scrollin {
	opacity: 1;
}

.fadeinクラスは、.fadeinクラス単体だとopacity:0;が適用されるので、見た目には見えないようになっています。

.fadeinクラスに.scrollinクラスが付与されることで、opacity:1;が適用されて、表示されるようになります。

要素をフェード（ふわっと浮き出すような動き）にしたいので、transition: all 1000ms;を設定し、1秒かけてopacityが変化するようにしています。

jQuery

$(function(){
	$(window).scroll(function (){
		$('.fadein_block').each(function(){
			var elemPos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			var speed = 1000;
			if(scroll > elemPos - windowHeight){
				$(this).find('h2').addClass('scrollin');
				$(this).delay(speed).queue(function(){
					$(this).find('p').addClass('scrollin').dequeue();
					$(this).find('p').delay(speed).queue(function(){
						$(this).find('img').addClass('scrollin').dequeue();
					});
				});
			}
		});
	});
});

大まかに説明すると、画面をスクロールしてフェードインさせたい要素の位置まできたら、1秒おきに「h2→p→img」の順番でフェードインさせるようにコードを記述しています。

それぞれの処理で何のメソッドが使用されているかは下記のとおりです。

スクロール時に要素にフォーカスする・・・.scroll()、.each()
フェードインさせたい要素の位置を求める・・・.offset().top、scrollTop()、height()
遅延時間を指定して、要素に時間差をつけてフェードインさせる・・・.find()、.delay()、.queue()、dequeue()

.delay()はアニメーションを遅延させるために使用するのですが、addClass()がアニメーションではないので遅延がうまくいきませんが、併せて.queue()、dequeue()を使用することで遅延させることができます。

setTimeout()メソッドを使った方法

「見出し→テキスト→画像」の順番で各要素が時間差でフェードインするように実装します。

イメージ

こんな感じに時間差でフェードインします（動作はもう一方の方法と同じです）。

ここから実装の方法をご紹介します。

HTML

<div class="fadein_block">
	<h2 class="fadein">見出し</h2>
	<p class="fadein">ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。<br>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
	<img src="https://have-nots.com/wp-content/uploads/2019/11/UNI154153611_TP_V-900x600.jpg" alt="" width="900" height="600" class="fadein" />
</div>

「.delay()、.queue()、dequeue()メソッドを使った方法」と同じです。

CSS

.fadein {
	opacity: 0;
	transition: all 1000ms;
}
.fadein.scrollin {
	opacity: 1;
}

「.delay()、.queue()、dequeue()メソッドを使った方法」と同じです。

jQuery

$(function(){
	$(window).scroll(function (){
		$('.fadein_block').each(function(){
			var elemPos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			var target = $('.fadein_block');
			var speed = 1000;
			if(scroll > elemPos - windowHeight){
				target.find('h2').addClass('scrollin');
				setTimeout(function(){
					target.find('p').addClass('scrollin');
					setTimeout(function(){
						target.find('img').addClass('scrollin');
					},speed);
				},speed);
			}
		});
	});
});

動きは「.delay()、.queue()、dequeue()メソッドを使った方法」と同じです。

時間差でフェードインさせる部分だけ使用しているメソッドが異なり、.find()、setTimeout()メソッドを使用しています。

setTimeout()の中にsetTimeout()を記述して、遅延の後にさらに遅延を発生させて、時間差を生み出してフェードインさせています。

まとめ

2パターン使用するメソッドは変わりますが、どちらも同様の動きを実装できます。

この記事で紹介した方法は最適化、関数化はまったく考慮していないのであまりスマートなコードではないかなとは思いますが、どこかしらで使える方法だとは思います。

管理人

遅延やフェードの間隔時間を変えたりもできるので、使えそうなところで改良したりして使ってください。

Programming