스타벅스 랜딩 페이지 예제

목표

• 스크롤 할때마다 화면에 보이지 않던 요소들이 나타나는 애니메이션 구현

HTML

<!-- SEASON PRODUCT -->
<section class="season-product scroll-spy">
  <div class="inner">

    <img src="./images/floating3.png" alt="Icon" class="floating floating3" />
    <img src="./images/season_product_image.png" alt="" class="product back-to-position to-right delay-0" />

    <div class="text-group">
      <img src="./images/season_product_text1.png" alt="title back-to-position to-left delay-1" />
      <img src="./images/season_product_text2.png" alt="description back-to-position to-left delay-2" />
      <div class="more back-to-position to-left delay-3">
        <a href="javascript:void(0)" class="btn">자세히 보기</a>
      </div>
    </div>

  </div> 
</section>

1. scroll-spy 가 들어갈 섹션 지정. 이러한 클래스가 있는 섹션들은 main.js에서 지정한 명령을 통해 찾아질 수 있음

2. 스크롤 할 때 해당 섹션들이 화면에 보이는지 안보이는지는 판단하는건 자바스크립트 라이브러리를 통해 도입
   scrollmagic cdn 검색

JS

const spyEls = document.querySelectorAll('section.scroll-spy')
spyEls.forEach(function (spyEl) {
  new ScrollMagic
    .Scene({
      triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
      triggerHook: .8 
    })
    .setclassToggle(spyEl, 'show')
    .addTo(new ScrollMagic.controller());
});

triggerHook: .8

내가 감시하고 있는 요소가 뷰포트에 어떤 지점에서 감시되었는가 판단해주는 옵션.

보여짐을 감시하는 trigger 개념이 0.8에 걸려있기 때문에 내가 감시하려는 요소가 밑에서 스크롤로 쭉 올라오다가 0.8에 걸리면 어떠한 내용이 trigger되어 실행(뷰포트 시작이 0 끝이 1)

감시하다가 화면에 보여진다고 판단되면 밑에있는 .setClassToggle 이라는 메소드를 실행하는 구조

.setclassToggle(spyEl, 'show')

인수를 두개 적을 수있는데, 첫번째는 클래스를 토글할 요소를 지정, 두번째는 토글할 클래스 이름을 지정

.addTo(new ScrollMagic.controller());

new라는 키워드 사용, ScrollMagic 이라는 자바스크립트 라이브러리를 실행해준다음에 controller메소드 실행

스크롤매직에서 기본적으로 추가한 옵션들을 내부에 컨트롤러에 내용을 할당해서 실제로 동작 할 수 있게 함

---

회고

scrollmagic이라는 외부 라이브러리의 도움을 받아 스크롤 애니메이션을 구현해봤다. 넘나 신기! 강의에서도 말씀하셨지만 외부 라이브러리를 다 이해할 수는 없다고 한다. 외부 라이브러에서 제공하는 문서에서 나와있는 진행하는 것도 좋은 방법이다.