[TIL #4] 클론코딩 - 전역배지 with 라이브러리

Yejin Yang·2022년 4월 12일

TIL

[TIL]

목록 보기

4/67

스타벅스 랜딩 페이지 예제

출처: starbucks-vanilla-app

전역배지

목표

헤더에 붙어서 같이 스크롤되는 배지
어느 일정부분이 넘어가면 자연스럽게 사라짐

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>

CSS

header {
	width: 100%;
  background-color: #f6f5f0;
  border-bottom: 1px solid #c8c8c8;
  position: fixed; /* 뷰포트 기준 배치 */
  top: 0;
 }

header .badges {
  position: absolute; /* 부모요소 header(position: fixed;) */
  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;
}

일반적으로 블록요소는 가로너비가 최대한 늘어날려고 시도하지만**position: fixed; position: absolute; 로 부여되어있는 요소는 브라우저가 auto로 설정되어있어서 가로 너비가 최소한으로 줄어들려고 시도한다. 따라서 가로사이즈가 자동은 auto인데 100%값을 주면 된다.

JS scroll 이벤트

자바스크립트를 이용해서 화면의 스크롤 값이 일정 값이상 커지면 요소가 사라지도록 하기

1. lodash.js 라이브러리

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

_.throttle(함수, 시간)

해당 라이브러리는 스크롤을 제어시킨다. 한번 스크롤 할 때마다 함수가 많이 실행되면 웹사이트가 무거워질수 있음(화면 버벅임)
복사한 코드를 프로젝트에 연결하고, _.throttle 메소드를 추가해서 사용하면 된다.

window.addEventListener('scroll', _.throttle(function () {
  console.log(window.scrollY);
  if (window.scrollY) {
  }
}, 300));

300 이라는 숫자는 0.3초를 의미. 단위는 ms (1000ms는 1초) 300은 스크롤하면 실행되는 함수의 갯수를 _.throttle 이라는 메소드로 0.3초 단위로 실행 되도록 제한을 거는 것

scrollY - 화면이 스크롤 될때마다 윈도우라는 객체부분에 있는 scrollY라는 속성의 값이 그때 마다 갱신이 되는데 스크롤될 때 화면이 위에서 몇 픽셀 지점에 있는지 확인 할수 있음

2. 배지 보이기, 숨기기 with gsap

https://cdnjs.com/libraries/gsap

gsap.to(요소, 지속시간, 옵션)

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));

gsap이라는 애니메이션 라이브러리를 통해 to라는 메소드로 애니메이션을 동작
투명과 별개로 display: 'none' 요소를 추가해야 화면에서 사라지게 할 수 있음(문자데이터임을 명시하기위해 따옴표 해야함)