【フェーダー】左から右へカーテンを開くように画像を順番に表示

左から右へカーテンを開くように画像が順番に表示される、イメージフェーダーのサンプルです。jQueryでaddClassして、CSSのanimationで動きを実装しています。

サンプルデモはこちら

htmlのコードは下記になります。
画像全てを格納するdivタグにclass=”fade_trigger1”を付与します。

<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<div class="fade_image fade_trigger1">
	<div class="fade_image_effect">
		<img src="fade01.jpg" alt="">
	</div>
	<div class="fade_image_effect">
		<img src="fade02.jpg" alt="">
	</div>
	<div class="fade_image_effect">
		<img src="fade03.jpg" alt="">
	</div>
	<div class="fade_image_effect">
		<img src="fade04.jpg" alt="">
	</div>
</div>

続いてCSSのコードです。
カーテンを開くようなエフェクトは、画像1つ1つを格納しているクラス名fade_image_effectのdivタグの疑似要素に設定します。divタグにクラス名activeが付与されたタイミングでanimationを動作させます。ショートハンドで記述していますが、各プロパティは以下の通りです。
animation-name: swipeRight;
animation-duration: 1.1s;
animation-timing-function: cubic-bezier(0.6,0,0.4,1);

.fade_image {
	display: flex;
	justify-content: space-between;
	margin: 0 0 3em;
}
.fade_image_effect {
	position: relative;
	width: 24%;
	overflow: hidden;
	padding: 0 1px 0 0;
}
.fade_image_effect:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	background: #f2f2f2;
	transform: translate3d(0%,0,0);
}
.fade_image_effect.active:after {
	animation: swipeRight 1.1s cubic-bezier(0.6,0,0.4,1);
	animation-fill-mode: forwards;
}
@keyframes swipeRight {
	0% {
		transform: translate(0);
	}
	50%, 60% {
		transform: translate3d(100%,0,0);
	}
	100% {
		transform: translate3d(100%,0,0);
	}
}
@media screen and (max-width: 640px) {
	.fade_image {
		flex-wrap: wrap;
		flex-direction: column;
	}
	.fade_image_effect {
		width: 100%;
		margin: 0 0 10px 0;
		padding: 0 0 1px 0;
	}
	.fade_image .fade_image_effect:last-child {
		margin: 0;
	}
}

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

var delaySpeed = 300;
$(window).on("load scroll", function (){
	$(".fade_trigger1 .fade_image_effect").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");
			});
		}
	});
});