스타벅스 클론코딩-8 (MAIN CONTENT~ 애니메이션)

 

MAIN CONTENT~ 애니메이션

 

특징

- 각 section이 화면에서 80% 지점에 보이면 좌 또는 우측에서 날라오는 애니메이션

 

 <!-- 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="" class="title back-to-position to-left delay-1" />
        <img src="./images/season_product_text2.png" alt="" class="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>


  <!-- RESERVE COFFEE -->
  <section class="reserve-coffee scroll-spy">
    <div class="inner">

      <img src="./images/reserve_logo.png" alt="" class="reserve-logo back-to-position to-right delay-0" />

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

    </div>
  </section>

  <!-- PICK YOUR FAVORITE -->
  <section class="pick-your-favorite scroll-spy">
    <div class="inner">

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

      </div>
    </div>
  </section>

  <!-- RESERVE STORE -->
  <section class="reserve-store">
    <div class="inner">

      <div class="medal">
        <div class="front">
          <img src="./images/reserve_store_medal_front.png" alt="" />
        </div>
        <div class="back">
          <img src="./images/reserve_store_medal_back.png" alt="" />
          <a href="javascript:void(0)" class="btn">매장안내</a>
        </div> 
      </div>

    </div>
  </section>

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

 

.back-to-position {
  opacity: 0;
  transition: 1s;
}
.back-to-position.to-right {
  /* 지정 요소 X축으로 이동 */
  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;
}

 

const spyEls = document.querySelectorAll('section.scroll-spy');
spyEls.forEach(function (spyEl) {
  new ScrollMagic
    // Scene(감시할 장면) 메소드를 추가
    .Scene({
      // 보여짐 여부를 감시할 요소를 지정
      triggerElement: spyEl,
      // 화면의 80% 지점에서 보여지는 여부를 감시
      triggerHook: .8
    })
    // 요소가 화면에 보이면 show 클래스 추가
    .setClassToggle(spyEl, 'show')
    // 컨트롤러에 장면을 할당
    .addTo(new ScrollMagic.Controller());
});