【フェーダー】画像が飛び出すように順番にフェードインで表示

画像が飛び出すように順番にフェードインで表示される、イメージフェーダーのサンプルです。
jQueryでaddClassして、CSSのanimationで飛び出すようなフェードインを実装しています。 CSSのtransitionは使用していません。

サンプルデモはこちら

htmlのコードは下記になります。
画像を格納するdivタグにclass=”fade_trigger1”を、フェードインさせる画像のimgタグにclass=”element”を付与します。

<p class="fade_title">フェーダーデモ</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<div class="fade_image fade_trigger1">
	<img class="element" src="fade01.jpg" alt="">
	<img class="element" src="fade02.jpg" alt="">
	<img class="element" src="fade03.jpg" alt="">
	<img class="element" src="fade04.jpg" alt="">
</div>

続いてCSSのコードです。
フェードインさせる画像はFlexboxで横並びにしています。また、opacityに0を指定して透明にしておきます。飛び出すようなフェードインの動作はanimationで実装しています。ショートハンドで記述していますが、各プロパティは以下の通りです。
animation-name: bounds;
animation-duration: 1000ms;
animation-timing-function: linear;
また、animation-fill-mode: forwards;を指定しないとアニメーション終了後に元のopacity: 0;のスタイルに戻ってしまうため注意が必要です。

.fade_image {
	display: flex;
	justify-content: space-between;
	margin: 0 0 3em;
}
.fade_image img {
	width: 24%;
	height: auto;
}
.element {
	opacity: 0;
}
.active {
	animation: bounds 1000ms linear;
	animation-fill-mode: forwards;
}
@keyframes bounds {
	0% {
		opacity: 0;
		transform: scale(1);
	}
	8% {
		opacity: 1;
		transform: scale(1.1);
	}
	17% {
		opacity: 1;
		transform: scale(1.2);
	}
	34% {
		opacity: 1;
		transform: scale(1);
	}
	51% {
		opacity: 1;
		transform: scale(1.1);
	}
	68% {
		opacity: 1;
		transform: scale(1);}
	84% {
		opacity: 1;
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@media screen and (max-width: 640px) {
	.fade_image {
		flex-wrap: wrap;
		flex-direction: column;
	}
	.fade_image img {
		width: 100%;
		margin: 0 0 10px 0;
	}
	.fade_image img:last-child {
		margin: 0;
	}
}

最後にjQueryのコードです。
フェードインさせる画像が画面サイズの下から1/5までスクロールされた時点でフェードインを実行します。delayで0.3秒遅延実行することで、順番にフェードインする動作を実装しています。jQueryではaddClassで画像のimgタグにクラス名activeを付与するだけの処理をしています。

var delaySpeed = 300;
$(window).on("load scroll", function (){
	$(".fade_trigger1 .element").each(function(i){
		var element = $(".fade_trigger1").offset().top;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll > element - windowHeight + windowHeight / 5){
			$(this).delay(i*(delaySpeed)).queue(function(){
				$(this).addClass("active");
			});
		}
	});
});