퍼블리싱-4

스크롤 위치 구현 애니메이션 (ScrollMagic)

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

spyEls.forEach(function(spyEl){
  new ScrollMagic
    .Scene({
    //보여짐 여부를 감시할 요소, scroll-spy class가 붙은 요소들을 감시한다.
      triggerElement: spyEl, 
    //뷰포트 Y축의 시작점과 끝나는 점을 0%~100%로 나눈다.  .8은 뷰포트 기준 80% 선이다.
      triggerHook: .8, 
    })
  // 뷰포트 80% 선에 spyEl(scroll-spy class가 존재하는 요소)가 보이면
  // show라는 class를 해당 라이브러리가 붙여준다
    .setClassToggle(spyEl, 'show') // Class
  // 내부 컨트롤러에 할당하여 동작하게 만든다.
    .addTo(new ScrollMagic.Controller()); 
});

html에 scroll-spy class를 추가해준다

<section class="scroll-spy"></section>
<section class="scroll-spy"></section>
<section class="scroll-spy"></section>
<section class="scroll-spy"></section>

화면에 보이지 않다가 show라는 class가 추가 될 때 화면에 보이게 하기 위한 css 처리

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

html scroll-spy class를 추가한 요소의 자식 요소들(실제로 animate될 대상)에
back-to-position을 붙여준다.

<section class="scroll-spy">
 <img src="./images/foo.png" alt="foo" class="back-to-position"/>
  </section>

<section class="scroll-spy">
 <img src="./images/foo.png" alt="foo" class="back-to-position"/>
  </section>

<section class="scroll-spy">
 <img src="./images/foo.png" alt="foo" class="back-to-position"/>
  </section>

자식 요소들의 시작점(랜더링 후 초기 위치)을 일치선택자로 선언한다.

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

<section class="scroll-spy">
 <img src="./images/foo.png" alt="foo" class="back-to-position to-right"/>
  </section>

<section class="scroll-spy">
 <img src="./images/foo.png" alt="foo" class="back-to-position to-right"/>
  </section>

<section class="scroll-spy">
 <img src="./images/foo.png" alt="foo" class="back-to-position to-left"/>
  </section>

show class가 추가될 때 나타나는 animate 정의한다.

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

극적인 효과를 위해 자식 요소에 delay-num class 활용할 수도 있다.

.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;
}