ある程度スクロールするとじわっと表示させる

やる事

スクロールをしていって、要素がスクリーンのある程度に来るとじわっと表示させる。

方法

html

<section class="fadein">
 <!--何かしらの要素を入れる-->
</section>

javascript

$(function(){
  $(window).scroll(function (){
    $(".fadein").each(function(){
      let imgPos = $(this).offset().top;
      let scroll = $(window).scrollTop();
      let windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + 250){ //ここの数値を変えて表示させる箇所を変更する
        $(this).addClass("fadein_scroll");
      } else {
        $(this).removeClass("fadein_scroll");
      }
    });
  });
});

css

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

.fadein_scroll {
    opacity : 1;
    }