[JS] ScrollMagic

이쯤되니까 대체 사용하는 JS 라이브러리가 몇 개여;;;;

물론 편하기는 한데…

라이브러리라는 말 써서 뭔가 있어보이기는 한데, 결국에는 여기저기서 긁어왔습니다^_^ 아닌가…

이거 맞는건가…

그래도 결과물만 좋으면 되니까 말이지…

 

https://scrollmagic.io/

ScrollMagic

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

 

이 코드를 다들 CDN이라고 부르더라...

기억하자. 

CDN!!!

Ex )

/**

* 요소가 화면에 보여짐 여부에 따른 요소 관리

*/

// 관리할 요소들 검색!

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

// 요소들 반복 처리!

spyEls.forEach(function (spyEl) {

  new ScrollMagic

    .Scene({ // 감시할 장면(Scene)을 추가

      triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정

      triggerHook: .8 // 화면의 80% 지점에서 보여짐 여부 감시

    })

    .setClassToggle(spyEl, 'show') // 요소가 화면에 보이면 show 클래스 추가

    .addTo(new ScrollMagic.Controller()) // 컨트롤러에 장면을 할당(필수!)

})