배경

구현 내용

CSS 애니메이션 구현

.animation {
 ...
 .anm_mod {
  // 一度透明にしておく
  opacity: 0;
  // デフォルトでは下方向（から上に向かう）に設定
  transform: translate3d(0, 100%, 0);
  // デフォルトでは1秒に設定
  transition: all 1s ease;
  ...
  &.left {
   transform: translate3d(-100%, 0, 0);
  }
  &.right {
   transform: translate3d(100%, 0, 0);
  }
  &.delay {
   transition: all 2s ease;
  }
  &.fast {
   transition: all 0.8 ease;
  }
 }
}

.animation .anm_mod.active {
  // jsでスクロール値に来たら　activeクラスが付与されるので、透明を解除しながらUIパーツが元の位置に戻る作用をする
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

javaScript

$(window).scroll(function() {
 　　// .animation 配下の　.anm_modを対象に見る
 $(".animation .anm_mod").each(function() {
  // スクロール中、各UIパーツ　.anm_modがブラウザ画面内に入ったら activeクラスが付与される
  const position = $(this).offset().top;
  const scroll = $(window).scrollTop();
  const windowHeight = $(window).height();
  if (scroll > position - windowHeight) {
   $(this).addClass("active");
  }
  // スクロール中、トップ画面付近まで戻ったら activeクラスを解除 ＝ 何度でもスクロールアニメが表現可能。一度しかアニメーションしたく無ければここを削除してください。
  if (scroll < 100) {
   $(this).removeClass("active");
  }
 });
});

HTML 구현 예

 <div class="animation">
  <div class="anm_mod left delay">
   anm_mod left delay
  </div>
  <div class="anm_mod right fast">
   anm_mod right fast
  </div>
 </div>

구현 결과

CodePen