4. 스타벅스 전역배지(GSAP)

스타벅스 전역배지(GSAP) 시작전 완성 모습

---

스타벅스 전역배지(GSAP) HTML

아래는 배지를 만들기 위한 HTML이다.

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

이 html의 css를 관리하기 위한 css 속성은

badges와 badge를 만들면 된다.

---

스타벅스 전역배지(GSAP) CSS

아래부터는 CSS를 살펴볼 것이다.

header .badges {
  position: absolute;
  top: 132px;
  right: 12px;
}

badges 클래스에서는 배지의 위치를 잡아줄 것이다.

부모요소인 header를 기준으로 위에서 132px만큼 오른쪽에서 12px만큼 가서 배지를 위치시킨다.

 

이제 배지를 꾸며볼 것이다.

header .badges .badge {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 4px 4px 10px rgba(0,0,0,.15);
  cursor: pointer;
}

badges 클래스에서는 배지의 모양을 잡아줄 것이다.

배지의 끝부분은 둥글게 만들어주고

overflow: hidden은 넘치는 부분이 짤려서 보이지 않게 해주는 역할을 한다.

배지가 붙어있는 것을 떼주기 위해 아래 외부여백을 12px둔다.

그리고 박스는 그림자를 만든다.

그리고 박스에 마우스 커서를 가져다대면 손가락 커서가 나올 수 있도록 한다.

---

스타벅스 전역배지(GSAP) JS 애니메이션 효과

이번 배지를 만들면서 제일 중요한 애니메이션 효과를 살펴볼 것이다.

애니메이션 효과를 만들기 위해서는 JS가 필요하기 때문에 JS를 알아볼 것이다.

 

JS를 이용하기 위해서는

2가지 스크립트 태그가 필요하다.

구글에 lodash cdn을 검색하여 아래 사이트로 접속한다.

https://cdnjs.com/libraries/lodash.js

lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

이 사이트에서 주황색 버튼의 태그버튼을 누르면 카피가 된다. 

이 복사한 코드를 index.html에 옮긴다.

이것을 사용하는 이유는 수십개의 함수 동시실행을 방지하기 위함이다.

데이터를 정렬/필터/색인할 수 있게 도와주는 오픈소스이다.

사용하면 스크롤을 관리할 수 있다.

아래 코드의 scrollY를 관리할 수 있게 도와준다.

 

또한 구글에 gsap cdn을 검색하여 맨 위에 나오는 사이트를 접속한다.

https://cdnjs.com/libraries/gsap

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

gsap은 scrollY의 값에 따라 배지가 보이고 안보이고를 구현할 수 있게 도와주는 오픈소스이다.

 

위와 마찬가지로 주황색 버튼의 태그 버튼을 눌러 복사해주고 index.html에 복사한다.

 

위 코드를 index.html에 복사해주면 아래 코드와 같다.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script defer src="./js/main.js"></script>

lodash, gsap 오픈소스 스크립트를 작성한 메인 자바스크립트 파일 위에 복사해준다.

우리가 작성한 파일은 최대한 아래쪽에 놓아준다.

 

이번에는 배지 자바스크립트 코드를 살펴볼 것이다.

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

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

badgeEl이라는 변수를 만들어주고 header .badges를 선택해준다.

addEventListener을 사용하여 스크롤 이벤트를 사용하면 _.throttle는

동일 이벤트가 반복적으로 시행되는 경우에 임의로 설정한 일정 시간 간격(ms)으로 콜백 함수의 실행을 보장한다.

window.scrollY가 500 이상이면 투명도를 0으로 하여 요소가 보이지 않게 하고

디스플레이를 사용하지 않게 한다.

gsap은 자바스크립트 애니메이션 라이브러리이다.

0.6초 동안 요소가 사라지는 효과를 gsap.to를 가지고 사용했다.

반대로 scrollY가 500 이하면 투명도를 1로 만들고

디스플레이는 블록으로 만들어서 보이도록 한다.

---

스타벅스 전역배지(GSAP) 최종 결과

아래 사진을 보면 배지가 어떻게 변하는지 볼 수 있다.