[HTML/CSS][Ch9][스타벅스] 스크롤 위치 계산 애니메이션

애니메이션을 위한 FIND THE STORE HTML / CSS 추가

index.html

  <!--FIND THE STORE-->
  <section class="find-store scroll-spy">
    <div class="inner">

      <img src="./images/find_store_texture1.png" alt="" class="texture1" />
      <img src="./images/find_store_texture2.png" alt="" class="texture2" />
      <img src="./images/find_store_picture1.jpg" alt="" class="picture picture1 back-to-position to-right delay-0" />
      <img src="./images/find_store_picture2.jpg" alt="" class="picture picture2 back-to-position to-right delay-1" />
      <div class="text-group">
        <img src="./images/find_store_text1.png" alt="스타벅스를 가까이에서 경험해보세요." class="title back-to-position to-left delay-0" />
        <img src="./images/find_store_text2.png" alt="고객님과 가장 가까이 있는 매장을 찾아보세요!" class="description back-to-position to-left delay-1" />
        <div class="more back-to-position to-left delay-2">
          <a href="javascript:void(0)" class="btn">매장찾기</a>
        </div>
      </div>

    </div>
  </section>

main.css

/*FIND THE STORE*/
.find-store {
  background-image: url("../images/find_store_bg.jpg");
}
.find-store .inner {
  height: 400px;
}
.find-store .texture1 {
  position: absolute;
  top: 0;
  left: 400px;
}
.find-store .texture2 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.find-store .picture {
  border-radius: 50%;
  box-shadow: 2px 2px 8px 0 rgba(0,0,0,.5);
  position: absolute;
}
.find-store .picture1 {
  top: -60px;
  left: 0;
}
.find-store .picture2 {
  top: 150px;
  left: 250px;

}
.find-store .text-group {
  position: absolute;
  top: 120px;
  left: 550px;
}
.find-store .text-group .title {
  margin-bottom: 20px;
}
.find-store .text-group .description {
  margin-bottom: 20px;
}

 

ScrollMagic cdn

• ScrollMagic : 스크롤에 반응하는 애니메이션 동작
• 구글에 scrollmagic cdn 검색 > https://cdnjs.com/libraries/ScrollMagic 진입 > 라이브러리 태그 복사 및 추가

<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>

main.js -> section태그에 'scroll-spy' 클래스가 있으면 특점지점에서 애니메이션 동작하게 구현

/* 
* ScrollMagic
* - Scene : 특정한 요소를 감시하는 옵션을 지정해주는 메소드
* - setClassToggle : 클래스 토글 지정
* - addTo : ScrollMagic에서 컨트롤러 개념의 내용을 추가하기 위해 사용
* */
const spyEls = document.querySelectorAll('section.scroll-spy')    // section 태그 + scroll-spy 클래스 요소
spyEls.forEach(function (spyEl) {
  // 요소가 뷰포트의 0.8 지점에서 감시되면 'show'라는 클래스를 토글하라
  new ScrollMagic
    .Scene({
      triggerElement : spyEl,   // 보여짐 여부를 감시할 요소 지정
      triggerHook : .8          // 감시할 요소가 뷰포트(0(최상단)~1(최하단))의 어떤 지점에서 감시됨을 판단
    })
    .setClassToggle(spyEl, 'show')   
    .addTo(new ScrollMagic.Controller());
});