스타벅스 만들기 3 - 헤더2 (header)

GSAP (GreenSock Animation Platform)

JavaScript를 이용하여 웹 애니메이션을 만들때 도움을 주는 라이브러리
https://cdnjs.com/libraries/gsap
해당 사이트를 통해 gsap 라이브러리를 이용할 수 있다.

뱃지

<div class="badges">
  <div class="badge">
    <img src="./images/badge1.jpg" alt="Badge" />
  </div>
  <div class="badge">
  <img src="./images/badge2.jpg" alt="Badge" />
</div>

const badgeEl = document.querySelector('header .badges');

window.addEventListener('scroll', _.throttle(function() {
  console.log(window.scrollY);
  if (window.scrollY > 500) {
    // 배지 숨기기
    // gsap.to(요소, 지속시간, 옵션 );
    gsap.to(badgeEl, 0.6, {
      opacity: 0,
      display: 'none'
    });
  } else {
    // 배지 보이기
    gsap.to(badgeEl, 0.6, {
      opacity: 1,
      display: 'block'
    });
  }
}, 300))

스크롤을 함으로써 특정 영역 이상 스크롤을 하였을 경우 뱃지를 숨긴다.
gsap.to(요소, 지속시간, 옵션);을 사용함으로써 뱃지가 숨겨지거나 보여질때 지속시간을 두어 갑자기 생기거나 없어지는 등의 어색함을 없앨 수 있다.
뱃지가 숨겨졌을 때 opacity: 0만 사용하고 display: 'none'를 사용하지 않았을 경우 뱃지만 숨겨지지만 해당 숨겨진 뱃지가 터치되는 불상사가 생길 수 있다.

이미지

.visual .cup1.image {
  position: absolute;
  bottom: 0;
  right: -47px;
}

.visual .cup1.text {
  position: absolute;
  top: 38px;
  right: 171px;
}

CSS 에서 상품 이미지와 이름을 사용할때 동일한 상품끼리 .visual .cup1를 사용함으로써 image의 위치만 이동시켜도 text의 위치도 자동으로 이동시켜 코드를 추가로 수정할 번거러움을 없앨 수 있다.

순차적 애니메이션

const fadeEls = document.querySelectorAll('.visual .fade-in');
fadeEls.forEach(function (fadeEl, index) {
  gsap.to(fadeEl, 1, {
    delay: (index + 1) * 0.7,
    opacity: 1
  });
});

fade-in의 이름의 모든 변수를 fadeEls로 선택하였다.
foreach 반복문을 사용하여 fade-in 이름의 수 만큼 반복 시켰다.
index의 초기 값은 0이므로 첫 번째 이미지가 생기기 위해 딜레이를 0.7초((0+1)*0.7=0.7)를 주었고 차례로 1.4, 2.1, 2.8 초의 딜레이를 적용시켰다.