今回ご紹介させていただく方法は、特定の要素が可視範囲に入ったタイミングでクラスを付ける（消す）スクリプトを実装し、cssで動きを付ける方法になります。

Jqueryを使用しますので、読み込んでください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

特定の要素をしていします。今回は「sample」というIDが付いている要素を例に記載します。

$(function(){
  $(window).scroll(function (){
    $("#sample").each(function(){
      var imgPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + windowHeight/5){
        $(this).addClass("fade_on");
      } else {
        $(this).removeClass("fade_on");
      }
    });
  });
});

このスクリプトを読み込んだ状態でスクロールすると、可視範囲に入ったタイミングで「fade_on」というクラスが付与されるかと思います。（class名は仮ですのでお好きなclass名を指定してください）

次にcssを設定します。

jsで非表示にする設定も出来ますが、今回は分かりやすくなるように、特定の要素は事前にcssで非表示にしておきます。

.fade_off {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.fade_on {
    opacity: 1;
}

以下HTMLの例です。

<section id="sample" class="fade_off">
  <p>この部分が表示非表示します</p>
</section>

これで事前にcssで非表示にしていた要素がスクロールで可視範囲に入ったタイミングでフェードインし、また可視範囲から出た場合はフェードアウトします。

スクロールイベントは使用するシーンは比較的多いので覚えておいて損はないでしょう。