ふわっと出る動きをつける

See the Pen
Untitled by 344yuu (@344yuu)
on CodePen.

ふわっと下から上に動きをつけたいセクションに、class名をつける

<section class="effect-fade">

//コンテンツ//

</section>

cssは２種類準備する。

opacityで0と1で浮かび上がらせる。

.effect-fade {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 0.7s;
}

.effect-fade.effect-scroll {
    opacity: 1;
    transform: translate(0, 0);
}

ページを読み込んだときと、スクロールしたときの２つに設定する。

// ロードしたとき
$(window).on('load', 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');
    }
  });
});

// スクロールしたとき
$(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');
      }
    });
  });

参考にさせてもらってページです▷ https://littlethings.jp/blog/web/css-effect-scroll