【JQ】要素が画面内に入ったらふわっと

投稿者: 投稿日:
海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法

<head>内に以下　Jqueryとscriptを入れておく

<!--jQueryのCDN-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
<!--//GoogleのCDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
<!--//MicrosoftのCDN-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>

<script>$(function(){
	$(window).scroll(function (){
		$('.fadein').each(function(){
			var elemPos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > elemPos - windowHeight + 200){
				$(this).addClass('scrollin');
			}
		});
	});
});	</script>

以下はHTML

<div>

	<section class="fadein">
		<h2>情報設計</h2>
		<p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
	</section>

	<section class="fadein">
		<h2>サイトマップ</h2>
		<p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
	</section>

	<section class="fadein">
		<h2>ワイヤーフレーム</h2>
		<p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
	</section>

</div>

以下はCSS

/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

前半ではデフォルト = エフェクトがかかる前の状態を指定します。fadeinのclassだけが付与された要素は「透明度が0.1で、下方に50px移動している」状態となっています。本来表示したい位置より50px下で、むっちゃ半透明な状態です。

後半ではエフェクト後の状態 = 読ませたい状態を指定します。”fadein” と “scrollin” というclassがダブルで加わると「透明度が1で、元の位置に移動している」状態になります。

で、5行目にいるtransitionで、この間をアニメーションで繋ぐということをやっています。こうしておくと、「scrollinというclassが付いた瞬間にアニメーションが始まる」状態となります。