【jQuery＋CSS】スクロールでふわっと要素をフェードイン表示する方法

.fadeIn {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fadeIn-up {
  transform: translate(0, 50px);
}

.fadeIn-down {
  transform: translate(0, -50px);
}

.fadeIn-left {
  transform: translate(-50px, 0);
}

.fadeIn-right {
  transform: translate(50px, 0);
}

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

$(window).scroll(function () {
    $('.fadeIn').each(function () {
        var scroll = $(window).scrollTop(); // 現在のスクロール位置
        var offset = $(this).offset().top; // 対象の上からの位置
        var windowHeight = $(window).height(); // ウィンドウの高さ
        if (scroll > offset - windowHeight + 200) {
            $(this).addClass("scrollIn");
        }
    });
});

<div class="fadeIn">
　<h2>フェードイン</h2>
</div>
<div class="fadeIn fadeIn-up">
　<h2>下からフェードイン</h2>
</div>