[javascript] 스크롤 시 뱃지 안보이게 하는 방법

스타벅스 홈페이지를 보면 우측에 뱃지가 보인다. 그리고 이 벳지는 일정부분 아래로 스크롤 하게되면 점차 투명해지면서 사라지게 된다.

위 이미지와 같은 이벤트를 구현할 때 자바스크립트 lodash 라이브러리와 gsap 라이브러리를 이용하면 편리하다. 먼저 html의 head 영역에 각 script 코드를 적용시킨다. 이때 반드시 main 자바스크립트 파일 위에 적용시켜야 한다.

<head>
<!--lodash 라이브러리 -->
<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>

<!--gsap 라이브러리 -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>

<script defer src="./js/main.js"></script>
</head>

그 후 main 자바스크립트 파일에 아래의 코드를 작성한다. (참고로 badgeEl 요소는 이미지가 담긴 div 요소이다.)

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

window.addEventListener('scroll', _.throttle(function () {
  if (window.scrollY > 500){
    // 배지 숨기기
    gsap.to(badgeEl, 0.6, {
      opacity: 0,
      display: 'none'
    });
  }else {
    //배지 재노출
    gsap.to(badgeEl, 0.6, {
      opacity: 1,
      display: 'block'
    });
  }
}, 300));

window에 스크롤 이벤트가 일어나면 해당 콜백함수가 반복 작동되어 프로그램에 너무 무리가 가기 때문에, lodash 자바스크립트 라이브러리 중 _.throttle(함수, 시간(ms)) 메소드를 이용하여 콜백 함수의 불필요한 실행을 줄여준다. 이는 이벤트의 콜백함수 실제 계속 반복 실행되는 것과 달리 임의로 설정한 일정시간 간격(ms)마다 콜백함수를 실행시킬 수 있다.

그리고 gsap 자바스크립트 라이브러리 중 gsap.to(요소, 지속시간(s), 옵션) 메소드를 통해 좀 더 자연스럽게 애니메이션을 구현시킨다. 해당 메소드의 인자로는 구현될 해당 요소와 애니메이션이 작동될 일정시간(s), 그리고 옵션을 객체로 넣는다.

'문제풀기' 카테고리의 다른 글

[javascript] 공지사항 슬라이드로 만들기 (수직 슬라이드) (0)	2021.06.15
[자바크스립트 이론] 스코프 (0)	2021.06.07
[프로그래머스] 폰켓몬 (0)	2021.06.02
[프로그래머스] 내적 (0)	2021.06.01
[프로그래머스] 완주하지 못한 선수 (0)	2021.05.29

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

기록하자 🐾

[javascript] 스크롤 시 뱃지 안보이게 하는 방법

'문제풀기' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[javascript] 스크롤 시 뱃지 안보이게 하는 방법

'문제풀기' 카테고리의 다른 글

'문제풀기' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역