[HTML CSS JS] 우측에 고정 배너 구현하기

 

화면 우측 상단 부분에 고정되어 있으며 스크롤을 아래로 내릴때 사라지는 배너 구현하기

 

1. 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>

badges 클래스 div 생성

두 개의 badge 클래스 div 생성 후 각각에 div 내에 배너 이미지 링크

 

2. CSS

/*  
  badges 항목을 항상 같은 위치에 놓기 위해 position 속성 absolute 설정 
  상위에 header의 position 속성은 fixed로 스크롤에 영향 없이 고정 속성
*/
header .badges {
  position: absolute;
  top: 132px;
  right: 12px;
}

/*  
  배너 이미지의 코너 부분을 둥글게 마감하기 위해 border-radius 값 설정
  border-radius 설정 적용을 위한 overflow : hidden 설정
  배너 위에 마우스 포인터 올리는 경우 pointer로 커서 변경
*/
header .badges .badge {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

주석에서 설명한 것과 같이 배너의 위치와 디자인 설정 완료

Q1. border-radius를 적용에 overflow : hidden이 필요한 이유는?

A1. badge 클래스 내에 border-radius 속성을 적용했지만 내부에 img에는 미적용됨 badge를 넘치는 img 내용을 숨기기 위해 overflow : hidden 속성을 적용

Q2. 그럼 img 태그 속성에 border-radius 속성을 적용하면?

A2. img 태그에 border-radius 속성이 적용되지만 모서리 부분에 흰색 배경이 보임

 

3. Javascript

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

lodash 라이브러리의 throttle 메서드 이용

lodash 라이브러리의 throttle 메서드는 scroll 이벤트와 같이 이벤트가 연속적으로 발생할때 사용하면 좋은

함수 실행을 지연 시켜주는 메서드 이다.

예를 들어 아래와 같은 경우 스크롤을 조금만(1칸) 내려도 12번의 이벤트가 수행된다.

window.addEventListener("scroll", function () {
  console.log(window.scrollY);
});

이는 불필요한 로드를 일으키기 때문에 lodash 라이브러리의 throttle 메서드를 이용하여

이벤트가 연속적으로 발생해도 일정 주기로만 함수가 실행되도록 할 수 있다.

https://lodash.com/docs/4.17.15#throttle

Lodash Documentation

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 함수를 이용하여 scrollY 값이 500 이상일 때 사라지게 하는 코드이다.

배너가 사라질 때 애니메이션 효과를 주기위해 gsap 라이브러리를 사용했다.

gsap 라이브러리의 to 메서드는 위에 주석과 같이 gsap.to(요소, 지속시간, 옵션) 방법으로 사용된다.

위에서 사용한 두가지 라이브러리를 사용하기 위해서는 html 코드 head부분에 아래 코드를 삽입해야한다.

    <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>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"
      integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>