헤더와 드롭다운 메뉴 - 전역 배지(GSAP)

GSAP 플러그인을 이용한 전역 배지

코드

HTML

</header> 바로 윗부분에 작성

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

CSS

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

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

JS

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));
// _.throttle(함수, 시간)

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

---

GSAP(The GreenSock Animation Platform)

자바스크립트로 제어하는 타임라인 기반의 애니메이션 라이브러리

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>

.to() 사용법 GSAP Easing

gsap.to(요소, 시간, 옵션)
// 또는
TweenMax.to(요소, 시간, 옵션)
gsap.to(window, .7, {
  scrollTo: 0
});