特定の要素がスクロール領域に入ったらフェードインさせる方法

今回は特定の要素がスクロール領域に入ったらフェードインで表示させる方法を紹介します。

ふわっと表示させるだけでも全体の雰囲気が変わると思います。

HTML

<section id="sample" class="fade_off">
  <p>この部分がフェードインします</p>
</section>

フェードインさせたい要素にfade_offクラスをつけます。最初は非表示にしておくので、そのためのクラスです。

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;
}

最初に非表示の状態にしておくのはCSSが行います。opacity: 1;で完全に透過させておきましょう。

.fade_onクラスはjQueryによって付与されるクラスです。このクラスが付与された時にopacityを1に戻し、表示させます。

ふわっとフェードインさせるためにtransitionを指定しておきましょう。

jQuery

先にjQueryを読み込んでしまいましょう。

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

フェードインで表示させるコードは以下になります。

$(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クラスが付与され、フェードインで表示されるようになります。

逆にスクロール領域から出た場合はフェードアウトで非表示になります。フェードアウトさせたくない場合はelse以下の部分を削除してください。