스크롤 위치를 계산하여 애니메이션 하기 📌 요소가 시간차로 하나씩 나타나기

1. ScrollMagic 라이브러리

2. CSS에서 선택자 스타일

- opacity, transform, translateX, transition-delay

3. HTML에 수동으로 클래스 추가

 

 

 

---

🚨 ScrollMagic 라이브러리 📌📌📌

ScrollMagic - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

📍 상수 spyEls <- section태그이면서 클래스명 scroll-spy를 갖는 모든 선택자

 

📍 forEach()메소드에서 메소드 체이닝으로 함수 불러오기

 ㄴ new라는 키워드를 이용하여 ScrollMagic 라이브러리를 실행 (생성자 함수)

 ㄴ Scene() : 감시하는 메소드 (첫문자 대문자)

 ㄴ setClassToggle() : 클래스 속성 지정, 제어하는 메소드

 ㄴ addTo() : 컨트롤하는 메소드

spyEls.forEach(function (spyEl) {
	new ScrollMagic.Scene().setClassToggle().addTo(); //메소드 체이닝으로 함수 불러오기
});

// ScrollMagic

const spyEls = document.querySelectorAll('section.scroll-spy');
spyEls.forEach(function (spyEl) {
   new ScrollMagic //메소드 체이닝으로 함수 불러오기
    .Scene({
      triggerElement: spyEl, // 보여짐의 여부를 감시할 요소
      triggerHook: .8 // 뷰포트 높이의 0~1사이 
    })
    .setClassToggle(spyEl, 'show') // 클래스명 show생성
    .addTo(new ScrollMagic.Controller()); 
});

 

📍  CSS

opacity, transform, translateX, transition-delay

html에서 필요한 부분에 해당 class를 수동으로 추가

.back-to-position {  opacity: 0;  transition: 1s;}

.back-to-position.to-right {  transform: translateX(-150px);}
.back-to-position.to-left {  transform: translateX(150px);}

.show .back-to-position {  opacity:1;  transform: translateX(0);}

.show .back-to-position.delay-0 {  transition-delay: 0s;}
.show .back-to-position.delay-1 {  transition-delay: .3s;}
.show .back-to-position.delay-2 {  transition-delay: .6s;}
.show .back-to-position.delay-3 {  transition-delay: .9s;}