スクロールに合わせて要素が下からスライドインしてくるエフェクトを実装するためのコードです。

HTML

<div class="slideIn">コンテンツ - 1</div>
<div class="slideIn">コンテンツ - 2</div>
<div class="slideIn">コンテンツ - 3</div>
<div class="slideIn">コンテンツ - 4</div>
<div class="slideIn">コンテンツ - 5</div>

スライドインさせたい要素に.slideInというクラスを付与します。

CSS

.slideIn{
	opacity: 0;
	transform: translateY(100px);
	transition: 0.5s;
}

初期状態では要素を隠しておく必要があるため、opacity: 0;で透明にしておきます。また、スライドの移動距離もtransform: translateY(◯px);で指定します（今回は100px）。

transitionは変化に掛かる時間の指定です（今回は0.5秒）。

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    function onScroll() {
        document.querySelectorAll(".slideIn").forEach(function(element) {
            var sectionTop = element.offsetTop;
            var windowBottom = window.scrollY + window.innerHeight;
            if (windowBottom > sectionTop + 100) {
                element.style.opacity = "1";
                element.style.transform = "translateY(0)";
            }
        });
    }
    onScroll();
    window.addEventListener("scroll", onScroll);
});

.slideInが付与された要素がウィンドウ下端から100pxの位置を超えたときに、opacityとtransformの値を変更するスクリプトです。

また、このスクリプトはページ読み込み時とスクロール時に実行されます。

jQuery版

jQueryを使用する場合はこちらです。

$(document).ready(function() {
	function onScroll() {
		$(".slideIn").each(function() {
			var sectionTop = $(this).offset().top;
			var windowBottom = $(window).scrollTop() + $(window).height();
			if (windowBottom > sectionTop + 100) {
				$(this).css({"opacity": "1", "transform": "translateY(0)"});
			}
		});
	}
	onScroll();
	$(window).on("scroll", onScroll);
});

実際の動作

See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.

スクロールして動作を確認してみてください。