스타벅스 만들기 6

3D 애니메이션

.reserve-store {
  background-image: url("../images/reserve_store_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

.reserve-store .inner {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reserve-store .medal {
  width: 334px;
  height: 334px;
  perspective: 600px;
}

.reserve-store .medal .front,
.reserve-store .medal .back {
  width: 334px;
  height: 334px;
  position: absolute;
  backface-visibility: hidden;
  transition: 1s;
}

.reserve-store .medal .front {
  transform: rotateY(0deg);
}

.reserve-store .medal:hover .front {
  transform: rotateY(180deg);
}

.reserve-store .medal .back {
  transform: rotateY(-180deg);
}

.reserve-store .medal:hover .back {
  transform: rotateY(0deg);
}

.reserve-store .medal .back .btn {
  position: absolute;
  top: 240px;
  left: 0;
  right: 0;
  margin: auto;
}

transform: rotateY(-180deg) 요소를 뒤집는다.(Y축으로 -180도)
backface-visibility : hidden 뒷면을 안보이도록 처리한다.
perspective: 600px; 원근법을 이용해서 600px 거리에서 3차원의 효과를 시각적으로 보여준다.

.reserve-store .medal .front {
  transform: rotateY(0deg);
}

transform: rotateY(0deg);을 적는 이유.
일부 브라우저에서는 지원이 안될 수 있기에 명시적으로 작성하여 적용해준다.

스크롤 위치에 따른 애니메이션

현재 스크롤 위치에 따라 이미지와 텍스트가 좌/우에서 생성되는 느낌이 들도록 구현하였다.

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

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

scrollMagic

스크롤 요소의 상호작용을 위한 cdn 라이브러리이다.
triggerHook: 0.8 페이지 상단이 0 하단이 1이다. 현재 보고 있는 페이지의 0.8의 영역을 의미한다.
.setClassToggle(spyEl, 'show') 을 이용하여 페이지의 0.8 영역의 class에 show를 추가해준다.

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

.back-to-position.to-right {
  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: 0.3s;

}

.show .back-to-position.delay-2 {
  transition-delay: 0.6s;
}

.show .back-to-position.delay-3 {
  transition-delay: 0.9s;
}

class에 show가 있는 요소들에 애니메이션을 추가해주는 코드이다.

Fotter

html에서 특수 기호 사용하는 방법

특수문자를 삽입할 때 &와 ;를 사용하면 특수 문자를 사용 가능하다.
© : ©
< : <
> : >
참고

현재 연도 구하기

const thisYear = document.querySelector('.this-year')
thisYear.textContent = new Date().getFullYear();

Date() 생성자는 날짜와 관련된 생성자이다.
new Date().getFullYear()을 이용하여 현재 연도를 구할 수 있다.

상단 이동 버튼

ScrollToPlugin은 스크롤 애니메이션을 지원해주는 GSAP 플러그 인이다.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.7/ScrollToPlugin.min.js" integrity="sha512-uLq4Xf3PvaO+NTghyBWeh43DxozRnHMM2vcwlxY+KVc7xv2PMLimAerptg7AbrdN2qZjAwExwV/IqGm4YQBPww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

const toTopEl = document.querySelector('#to-top');

window.addEventListener('scroll', _.throttle(function() {
  console.log(window.scrollY);
  if (window.scrollY > 500) {
    // gsap.to(요소, 지속시간, 옵션 );
    // 버튼 보이기
    gsap.to(toTopEl, 0.2, {
      x: 0
    });
  } else {
    // 버튼 숨기기
    gsap.to(toTopEl, 0.2, {
      x: 100
    });
  }
}, 300))

toTopEl.addEventListener('click', function() {
  gsap.to(window, 0.7, {
    scrollTo: 0
  });
});

Y축 기준으로 500 초과일 경우 상단 이동 버튼이 보이고 이하일 경우 버튼을 이동시켜 보이지 않도록 한다.
scroolTo를 이용하여 버튼 터치 시 최상단으로 이동할 수 있도록 한다.