jQuery

スクロールで要素をフェードインさせる

・要素はあらかじめ非表示にしておく

・スクロールしたらフェードインさせる要素にクラス付与する

下からフェードイン

▼▼▼▼▼　スクロール　▼▼▼▼▼

左からフェードイン

▼▼▼▼▼　スクロール　▼▼▼▼▼

右からフェードイン

▼▼▼▼▼　スクロール　▼▼▼▼▼

左右からフェードイン

▼▼▼▼▼　スクロール　▼▼▼▼▼

javascript

                  
//フェードイン

//「.in-fade-up」下かららフェードイン
//「.in-fade-left」左からフェードイン
//「.in-fade-right」右からフェードイン

$(function () {
  const $targets = $('.in-fade-up, .in-fade-left, .in-fade-right');

  function checkAnimation() {
    const windowBottom = $(window).scrollTop() + $(window).height();

    $targets.each(function () {
      const $this = $(this);
      const elementTop = $this.offset().top;

      if (!$this.hasClass('is-active') && windowBottom > elementTop) {
        $this.addClass('is-active'); // 一度だけ付く
      }
    });
  }

  $(window).on('scroll resize', checkAnimation);
  checkAnimation();
});

CSS

                  
/* 下からフェードイン */
.in-fade-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.in-fade-up.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 左からフェードイン */
.in-fade-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.in-fade-left.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 右からフェードイン */
.in-fade-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.in-fade-right.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}