スクロールして可視範囲に入ったら要素をフワッと表示させる方法です。

フェードインしながら表示させる方法

まずは、ターゲットとなる要素にjs-scrollというクラス名を付けておきます。そして、このクラス名がついている要素が可視範囲に入ったら、フェードインするようにCSSとjQueryで設定をしていきます。

CSSでは、ターゲットとなる要素に、transform: translateY(30px);を指定して、ちょっとだけ本来の位置より下げておきます。可視範囲に入ったらis-showというクラスが追加され、少しせり上がりながらフェードインするように設定します。

.js-scroll {
	transition: all .6s ease;
	transform: translateY(30px);
	opacity: 0;
}
  
.js-scroll.is-show {
	transform: translateY(0);
	opacity: 1;
}

あとは、jQueryでイベント発火のタイミングを調整していきます。

$(window).on('scroll', function() {
	$('.js-scroll').each(function() { // .js-scrollというクラスが付いている要素に対して
    
     var elemPosition = $(this).offset().top,
         windowHeight = $(window).height(),
         scroll = $(window).scrollTop();
    
     if (scroll > elemPosition - windowHeight + windowHeight / 5) {
    	 // if (scroll > elemPosition - windowHeight) イベント発火のタイミグはお好みで
         $(this).addClass('is-show'); // ターゲットにis-showというクラスを追加
     }
  });
});

以上が、スクロールして可視範囲に入ったら要素を表示させる方法でした。