【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装

※文章・コード見直しの為、2020年10月30日に更新しました。

フェードインアニメーションのサンプルは以下を参照してください

上記のフェードインアニメーションのサンプルを下にスクロールしてみてください。下からふわっと要素が表示されていると思います。
今回はこのような実装ができるように紹介していきます。

HTMLの記述

<ul>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
  <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li>
</ul>

liタグにアニメーションするためのクラス「animation」を付与しておきます。

CSSの記述

ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 750px;
	margin: 0 auto;
	padding: 50px 25px;
}
li{
	width: 48%;
	margin: 0 0 100px;
}
img{
	width: 100%;
	height: auto;
}
/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

クラス名「animation」にアニメーションされる前のスタイルを記述します。
下からふわっとフェードインするようにしたいので「opacity」で透過して「visibility」で要素を非表示にしています。

さらに「transform」で標準の位置よりも「30px」下に配置して、アニメーションされる時間を「transition」で指定しています。

jQueryの記述

$(function(){
	$(window).on('load scroll',function (){
		$('.animation').each(function(){
			//ターゲットの位置を取得
			var target = $(this).offset().top;
			//スクロール量を取得
			var scroll = $(window).scrollTop();
			//ウィンドウの高さを取得
			var height = $(window).height();
			//ターゲットまでスクロールするとフェードインする
			if (scroll > target - height){
				//クラスを付与
				$(this).addClass('active');
			}
		});
	});
});

上記のコードを簡単に説明すると、ページ上部からクラス名「animation」までの距離を測定して、クラス名「animation」までスクロールされると「active」というクラス名を付与する設定にしております。

クラス名「active」が付与されることで、CSSに設定したプロパティが発動し、アニメーションが行われるという原理になっています。

以上がjQueryを使用したフェードインアニメーションの実装になります。
よかったら参考にしてみてください。