(스타벅스)헤더_ Side Badge 추가 // 스크롤 에니메이션

포인트

HTML

**position:fixed 를 이용하여 화면이 바뀌어도 해당 요소 고정.

    > Position 이 relative 일 때 블록요소는 너비를 최대한으로 늘리려 하지만 absolute나 fixed일 때는 

       최소한으로 가지려 하기때문에 요소의 너비가 화면 전체를 차지하도록 하려면 width:100%를 추가해주어야함

 

 

CSS

** overflow:hidden으로 곡률이 적용된 div밖으로 이미지가 넘치지 않게 해줌

 

 

JS

** lodash 라이브러리를 사용해서 addEventLister로 뱃지에 scroll 함수 적용

    > _.throttle : 페이지에 콘텐츠가 많은경우 페이지가 무거워지기 때문에스크롤을 할 때마다 함수가 실행된다면 화면에 렉이 걸릴수 있다

       이를 방지하기 위해 지정시간동안 요청을 무시하게 해줌

참고: 

2022.06.04 - [JS] - JS 라이브러리_lodash, gsap, swiper

**gsap라이브러리를 사용해서 보다 부드러운 애니메이션 설정

** display 와 opacity의 차이점: 

    opacity: 값을 숫자로 입력하는 속성은 애니메이션 전환효과를 통해 변화를 자연스러운 전환효과

    display: 중간값이 없이 'none' 'block'의 속성만 존재하기 떄문에 자연스러운 전환효과 적용불가

 

 

결과

스크롤을 내리면 배지가 사라지고 올리면 나타난다

HTML

<!-- BADGES -->
<header>
    <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>
 </header>

CSS

header {
position:fixed;
width:100%}
// 상단에 fix되어 보일 수 있도록
// position 이 fixed / absolute일 때는 너비를 최소한으로 가지려 하기때문에
// 고정된 header의 너비가 화면 전체를 차지하도록 하려면 width를 100%



header .badges {
  position: absolute;
  top: 132px;
  right: 12px;
}
header .badges .badge {
  border-radius: 10px;
  overflow: hidden;  // 곡률을 준 div 밖 영역으로 이미지가 넘치지 않는다
  margin-bottom: 12px;
  box-shadow: 4px 4px 10px rgba(0,0,0,.15);
  cursor: pointer;

}

JS

const badgeEl = document.querySelector('header .badges')
//window는 현재보고있는 창을 지정
//스크롤이 지나치게 자주 발생하는 것을 조절(throttle, 일부러 부하를 줌)
//페이지에 스크롤 이벤트 추가
//_.throttle(함수,시간) 시간은 ms형식으로 ex) 0.4초 = 400
window.addEventListener('scroll', _.throttle(function () {
   // 페이지 스크롤 위치가 y축 500px이 넘으면.
  if (window.scrollY > 500) {
    //gsap이라는 라이브러리로 .to속성을 사용하여 badgeEl요소를 .4초동안 {}안의 함수를 실행
    //gsap.to(요소,지속시간,옵션)
    gsap.to(badgeEl, .6, {
        opacity: 0, //투명도
        display: "none" // 다른요소들을 실행할 수 있게 페이지에서 아예 없애야함

      
    })
  }
  else {
      gsap.to(badgeEl, .6, {
          opacity: 1, //투명도 다시보이기
          display: "block"

        }
      )
  }
}, 400))