[카카오테크캠퍼스 선택과정] 스타벅스 예제: 스크롤 위치 계산 애니메이션

ScrollMagic

현재 스크롤 위치를 계산하는 라이브러리, 강의에서 나온 2.0.8 버전을 사용했다.

특정 위치에 도달하면 애니메이션이 동작하게 만들고 싶을때 유용하다.

const spyEls = document.querySelectorAll("section.scroll-spy");

spyEls.forEach(function (spyEl) {
  new ScrollMagic.Scene({
    triggerElement: spyEl,
    triggerHook: 0.8,
  })
    .setClassToggle(spyEl, "show")
    .addTo(new ScrollMagic.Controller());
});

Scene : 특정 요소를 감시하는 옵션 지정

triggerElement : 감시할 요소

triggerHook : 감시 기준

setClassToggle(기존 요소, 기존 요소에 토글할 class) : class 토글

addTo : 애니메이션을 실행하기 위한 컨트롤러 지정