스크롤시 엘리먼트에 애니메이션 추가하기

HTML

<section class="container animation">
  스크롤 시 애니메이션 추가
</section>

CSS

@keyframes animation-active {
  0%{opacity: 0; position:relative; top:50px;}
  100%{opacity: 1; position:relative; top:0;}
}
.animation{opacity: 0;}
.animation-active{animation: animation-active 1 .5s; animation-fill-mode:forwards;}

JavaScript

$(function(){

  const Elements = $('.animation');

  function scrollSize(){
    const scrollTop = $(document).scrollTop();  // 스크롤TOP 값
    const windowH = $(window).height(); // 창 높이
    const gap = 100;
    const activeScroll = scrollTop + windowH - gap; // 기준값

    Elements.map(function(){
      const elementsX = $(this).offset().top; // 높이값
      if(elementsX <= activeScroll){
        $(this).addClass('animation-active');
      }
    });
  }
  scrollSize();

  $(window).on('scroll', scrollSize); 
});