[웹디자인] 스크롤에 반응하는 badge

Lodash

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

GSAP & ScrollToPlugin

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

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

html

<header>
  <div class="badge">
    <img src="https://placeimg.com/100/200/IT" alt="Badge">
  </div>
</header>

css

header {
  background: #f6f5f0;
  border-bottom: 1px solid #c8c8c8;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9;
  height: 120px;
}

header .badge {
  position: absolute;
  top: 132px;
  right: 12px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

javascript

const badgeEl = document.querySelector('header .badge')

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

GSAP으로 여러 요소 순차적으로 fade-in

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