JS - scrollMagic 라이브러리

scrollMagic 라이브러리를 사용해서 페이지가 일정 위치에 도달하면

이벤트 발생시키는 라이브러리입니다.

 

scrollMagic cdn

scrollMagic cdn참조

 

scrollMagic demo

scrollMagic demo 참조

 

scrollMagic 예시

section.scroll-spy 값이 있는 요소들을 모두 찾아서 spyEls에 할당합니다.

forEach메소드를 사용해서 각각의 요소를 반복하게 함수를 실행될 겁니다.

ScrollMagic뒤에 체이닝방식으로 메소드들을 연결합니다.

 

.Scene() 메소드는 특정한 요소를 감시하는 옵션을 지정해줍니다.

triggerElement 속성은 감시한 요소를 지정하고,

triggerHook 속성은 뷰포트의 어느 위치에 도달한지 감시하는 겁니다.

뷰포트 위에는 0, 하단에는 1인 값입니다.

 

.setClassToggler() 메소드는 어떤 클래스를 넣었다 뺐다 할 수 있습니다.

즉, spyEl 요소에 show 클래스를 넣었다 뺐다 할 겁니다.

 

.addTo() 메소드는 scrollMagic 라이브러리가 필요한 컨트롤러입니다.

 

더 많은 사용법은 문서 참조하세요