ScrollMagic (스크롤 위치 계산)

• 현재 스크롤을 계산하여, 특정 요소에 도달하였을 때를 알려주는 ScrollMagic 스크롤 라이브러리를 사용했습니다.
• 특정 요소를 target으로 하여 여러가지 스크롤 옵션을 넣어, 스크롤이 해당 요소에 도착하면 특정 클래스를 넣었다 뺐다 가능 합니다.

Index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

• scrollmagic cdn

CSS

.back-to-position { // 스크롤이 80%이상 넘어가기 전의 기본 상태 
  opacity: 0;
  transition: 1s;
}
.back-to-position.to-right { // 왼쪽에서 오른쪽으로 나타나는 에니에이션
  transform: translateX(-150px); // 화면의 요소가 왼쪽으로 150px만큼 이동함
}
.back-to-position.to-left { // 오른쪽에서 왼쪽으로 나타나는 에니에이션
  transform: translateX(150px); // 화면의 요소가 오른쪽으로 150px만큼 이동해서 다시 되돌아옴
}
.show .back-to-position { // 화면에서 &0%이상 스크롤이 넘어가면 show 클래스의 css속성이 실행됨  
  opacity: 1;
  transform: translateX(0);
}
// 스크롤이 화면의 80% 이상 넘어가면 0.3초 간격으로 해당 show 클래스의 요소들이 화면에 나타남
.show .back-to-position.delay-0 { 
  transition-delay: 0s;
}
.show .back-to-position.delay-1 {
  transition-delay: 0.3s;
}
.show .back-to-position.delay-2 {
  transition-delay: 0.6s;
}
.show .back-to-position.delay-3 {
  transition-delay: 0.9s;
}

• .back-to-position 을 붙인 요소는 기본적으로 투명하고 변할때, 전환효과(transition)를 가지도록 합니다.
• 오른쪽에서 이동할지, 왼쪽에서 이동할지 .to-right 또는 .to-left를 지정합니다.
  각 클래스는 150px을 해당 자리에서 각 방향으로 물린다. (일치선택자 주의)
• .show .back-to-position을 opacity: 1, transitionX(0)으로 설정하여 스크롤 트리거가 작동시 나타나게 합니다.
• .show .back-to-position.delay-0를 delay 마다 지정함 으로써 파트안에서도 각 요소들이 다른 delay를 가지게 하여 순차적으로 애니메이션이 실행되게 합니다.

JS

const spyEls = document.querySelectorAll("section.scroll-spy");
spyEls.forEach(function (spyEl) {
  new ScrollMagic.Scene({
    triggerElement: spyEl, // 보여짐 여부를 감시할 요소 (target)
    triggerHook: 0.8, // 전체 화면 수직 방향의 80% 지점을 감시 (0 ~ 1)
  })
    .setClassToggle(spyEl, "show") // 해당 요소(splEl)가 화면에 보여지면 해당 메소들 실행
    .addTo(new ScrollMagic.Controller()); // 내부에 컨트롤러에 실제 동작하도록 넣음
});

• 스크롤이 화면의 80%지점을 지나칠 때 show 클래스가 추가됩니다.
• target 부분을 section.scroll-spy 선택자가 있는 요소들 모두를 가져와 spyEls에 할당
• 배열인 spyEls를 forEach를 통해서 반복문 실행
• new 키워드로 ScrollMagic 클래스를 생성
• .Scene 함수를 통해서 스크롤이 감시할 요소(triggerElement)와 스크롤 센서의 화면 위치(triggerHook)을 지정함
• .setClassToggle 함수를 이용해서 감시할 요소에 붙일 html 클래스명을 지정
• .addTo 함수를 통해서 Controller가 실행할수 있게 부착함