완로그
article thumbnail

1. ScrollMagic

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

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

<javascript />
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 : 애니메이션을 실행하기 위한 컨트롤러 지정

profile

완로그

@완석이

프론트엔드 개발자를 꿈꾸는 완석이의 일기장입니다.