スクロールして画面内におさまった時点でコンテンツを表示させるjQuery

更新日：2016年4月2日

通常ウェブページを開いたと同時にコンテンツは全て表示されますが、今回はスクロールして画面内におさまった時点でコンテンツを表示させるjQueryのご紹介です。

企業のランディングページでよく使われている技法です。
画像に対して使われるのが主ですが、テキストに対して使っても勿論問題ありません。

ちなみにこのページにも実装しておりますので、どうぞ下の方までスクロールしてみて下さい。百聞は一見に如かずです。

さて、実際に見て貰った所で、実装方法の解説をしていきますね。
まずCSSで

.contentsin {
	transform: translate(0, 60px);
	transition: all 600ms;
	opacity: 0.2;
}

.contentsin.scrollin {
	transform: translate(0, 0);
	opacity: 1;
}

と記述します。

.contentsinは、スクロールして画面内におさまるまで待機している状態のCSSです。透明状態で、スクロールされるのを今か今かと待ちかまえています。
.contentsin.scrollinは画面内におさまった時に使用されるCSSです。後述するjQueryの記述の際に使用するもので、透明状態を解除します。

そしてjQueryには

$(function() {
	$(window).scroll(function () {
		$('.contentsin').each(function() {
			var elemPos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > elemPos - windowHeight + 200) {
				$(this).addClass('scrollin');
			}
		});
	});
});

と記述します。

あとはスクロールして画面内におさまった時点で表示させたい要素に.contentsinを付与してあげればそれで完成です。

よく分からないって人の為に例を記述しておくと、下記のようにclassを付与させてあげればいいということです。

表示させたい要素に.contentsinを付与しています。

いかがでしたでしょうか？
ちょこっと記述して、classを付与してあげるだけで誰にでも簡単に実装出来ちゃいます！