スクロールで要素が画面の中に入ったらふわっとフェードインするコンテンツ

javascript と css でつくりました。
スクロールしていって、画面の中に入ったらフェードインで表示。
戻していって画面から消えるときにフェードアウトで非表示になるようにもしてます。

1. コードと解説
2. 使い方

コードと解説

html

<div class="fadeConts"></div>
<div class="fadeConts"></div>
<div class="fadeConts"></div>
<div class="fadeConts"></div>
<div class="fadeConts"></div>
<div class="fadeConts"></div>
<div class="fadeConts"></div>
<div class="fadeConts"></div>

.fadeConts というクラスが付いていると、フェードイン・アウトするようにします。

css

.fadeConts {
	width: 500px;
	height: 400px;
	margin: 40px auto;
	background-color: lightpink;
	opacity: 0;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
}
.fadeConts.show {
	opacity: 1;
}

.fadeConts にはあらかじめ opacity: 0; を入れ非表示にしておきます。
また transition: .5s; を入れることでフェードインのアニメーションになるようにしています。

.show というクラスに opacity: 1; とし、このクラスをつけることで表示されるようにします。

javascript

var fadeConts = document.querySelectorAll('.fadeConts'); // フェードさせる要素の取得
var fadeContsRect = []; // 要素の位置を取得するための配列
var fadeContsTop = []; // 要素の位置を取得するための配列
var windowY = window.pageYOffset; // ウィンドウのスクロール位置
var windowH = window.innerHeight; // ウィンドウの高さ
var remainder = 100; // ちょっとはみ出させる部分

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

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

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

.fadeConts クラスがついているものの位置を取得。
スクロールするたびに、.fadeConts クラスがついている要素の位置とスクロール位置を比較。スクロール位置が .fadeConts クラスがついている要素の位置を越えると、.show クラスを付与しフェードインさせます。

ポイント

var remainder = 100; // ちょっとはみ出させる部分

if(windowY > fadeContsTop[i] - windowH + remainder) {
			// .showを付与
			fadeConts[i].classList.add('show');
		} else {
			// 逆に.showを削除
			fadeConts[i].classList.remove('show');
		}

要素が画面の下端にかかってちょっと見えたところで表示させたいので、それ remainder という変数で設定しています。
.fadeConts の開始位置からウィンドウサイズを引き remainder を足した位置になったところ。これが下端からちょっと見えたところ。スクロール位置がここになったときに .show クラスを付与して要素を表示させます。
else で .show を削除することで、画面の外に出るときにフェードアウトするようにしました。

window.addEventListener('resize', function () {
	windowH = window.innerHeight;
});

ウィンドウサイズが変わるとフェードインのタイミングがずれるので、リサイズの動きがあったときにウィンドウの高さを再取得しています。

使い方

それぞれコピペして読み込んで、.fadeContsクラスをつけるだけ。
適宜 css など変更すればOKです。

前の記事

マウスホイールで切り替わる全画面コンテンツをつくってみた 2019.03.22
次の記事

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