jQueryでスクロール時に下から表示させる方法

スクロール時にしたからコンテンツがふわっとフェードインさせる方法です、

■css

.fade{
  opacity : 0;
  transform: translateY(30px);
  transition: all 0.6s;
}

■js

$(function(){
    $(window).scroll(function (){
        $('.fade').each(function(){
            var target = $(this).offset().top;
            var scrollTop = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > target - windowHeight + 300){
                $(this).css('opacity','1');
                $(this).css('transform','translateY(0)');
            }
        });
    });
});

表示させるタイミングは、ターゲットの存在するスクロール位置から300のところ(if (scroll > target – windowHeight + 300)です。