jQueryでふわっとさせる(コピペ可)

1.ふわっとさせたいHTMLの要素にクラスをつける

index.html

<div class="他クラスとも共存可 effect-fade">
//処理
<div>

2.CSSにふわっとさせる処理を書く

style.css

.effect-fade {
  opacity: 0;
  transform: translate(0, 100px); /* ふわっとさせる高さ */
  transition: all 1500ms; /* ふわっと仕切るまでにかかる時間 */
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

3.Jqueryでふわっと詳細を書く

script.js

$(function () {
  $(window).scroll(function () {
    $(".effect-fade").each(function () {
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight) {
        $(this).addClass("effect-scroll");
      }
    });
  });
  jQuery(window).scroll();
});