スクロールで要素が画面の中に入ったら横からスライドしてくるコンテンツ

javascript と css で実装しました。
この間つくった スクロールで要素が画面の中に入ったらふわっとフェードインするコンテンツ の応用版です。

デモ

これもフェードインのやつもそうですが、ウェブサイトでよく見かけます。
こういうのが自分も作れるようになってとても嬉しいです。

コードと解説

html

<div class="slideContsL slideConts"></div>
<div class="slideContsR slideConts"></div>
<div class="slideContsL slideConts"></div>
<div class="slideContsR slideConts"></div>

.slideConts クラスに対して js を効かせています。
左からスライドしてくるものは .slideContsL 、右からスライドしてくるものは .slideContsR というクラスで。
スタイルシートで左右からのスライドのアニメーションは実装しています。

css

#wrap {
	position: relative;
	overflow: hidden;
	width: 800px;
	margin: 0 auto;
}
.slideConts {
	width: 500px;
	height: 400px;
	margin: 40px auto;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.slideContsL {
	background-color: lightpink;
	transform: translate(-800px, 0);
}
.slideContsR {
	background-color: lightblue;
	transform: translate(800px, 0);
}
.slideContsL.show {
	transform: translate(-50px, 0) !important;
}
.slideContsR.show {
	transform: translate(50px, 0) !important;
}

#wrap はスライドさせるコンテンツを置いておく親要素。
幅を指定し、overflow: hidden; としておきます。

.slideConts で基本的な要素のスタイルを指定。
ここにアニメーション用の transition も設定しておきます。

.slideContsL .slideContsR であらかじめ親要素の外に置いておくためのスタイルを指定します。
transform がそれに該当します。

javascript で .show クラスをつけ、.show クラスがつくと左右からスライドしてくるようにします。
.slideContsL.show、.slideContsR.show にスライド後の位置を指定します。

javascript

var slideConts = document.querySelectorAll('.slideConts'); // スライドで表示させる要素の取得
var slideContsRect = []; // 要素の位置を入れるための配列
var slideContsTop = []; // 要素の位置を入れるための配列
var windowY = window.pageYOffset; // ウィンドウのスクロール位置を取得
var windowH = window.innerHeight; // ウィンドウの高さを取得
var remainder = 100; // ちょっとはみ出させる部分

// 要素の位置を取得
for (var i = 0; i < slideConts.length; i++) {
	slideContsRect.push(slideConts[i].getBoundingClientRect());
}
for (var i = 0; i < slideContsRect.length; i++) {
	slideContsTop.push(slideContsRect[i].top + windowY);
}

// ウィンドウがリサイズされたら、ウィンドウの高さを再取得
window.addEventListener('resize', function () {
	windowH = window.innerHeight;
});

// スクロールされたら
window.addEventListener('scroll', function () {
	// スクロール位置を取得
	windowY = window.pageYOffset;
	
	for (var i = 0; i < slideConts.length; i++) {
		// 要素が画面の下端にかかったら
		if(windowY > slideContsTop[i] - windowH + remainder) {
			// .showを付与
			slideConts[i].classList.add('show');
		} else {
			// 逆に.showを削除
			slideConts[i].classList.remove('show');
		}
	}
});

基本的に前回つくった スクロールで要素が画面の中に入ったらふわっとフェードインするコンテンツ と同じ。
画面下端にかかったら、.show クラスを付与。
アニメーションは css で設定しています。