💻 Bennett & Clive 클론 코딩

• 사이트명: Bennett & Clive
• 제작기간: 24.03.28 ~ 24.03.31(4일 소요)
• 사용언어: html, css, js
• 분류: 반응형

🔍 Main Point

• 스크롤 시 고정된 상태에서 동일한 텍스트가 한쪽에서는 보여지고 다른 쪽에서는 사라지는 효과 구현
• 지역별 시간 구하기
• CSS scrollbar-gutter 속성

스크롤 시 기존 영역은 고정된 상태에서 다음 영역이 나타나는 효과 만들기

위의 예제와 같이 기존 컨텐츠 영역은 고정된 상태에서 다음 영역이 올라오는 효과를 만들어 보았다. 스크롤을 하다 중간에 멈추면 스냅되는 효과까지 추가하였다.

코드 설명은 아래와 같다.

HTML

• container -> sticky 속성을 사용할 요소의 부모. 페이지의 스크롤 값을 가질 요소
• sticky -> sticky가 될 요소
• item -> 하나의 영역. 스크롤 시 height 값이 0이 될 요소
• content -> item의 자식. height 100vh를 주어 스크롤 해도 부모를 따라가지 않음

<div class="container">
  <div class="sticky">
    <div class="item">
      <div class="content">
        content 1
      </div>
    </div>
    <div class="item">
      <div class="content">
        content 2
      </div>
    </div>
    <!-- ...이하 생략(item 총 개수: 5) -->
  </div>
</div>

CSS

• container 요소에 스크롤 할 만큼의 높이 값 주기
• item에 height: 100% 주기 (GSAP으로 스크롤 하게 되면 0으로 줄어드는 효과를 줄 예정)
• 각 item에 z-index 값 주기(현재 absolute로 겹쳐진 상태)
• item에 mask-image 속성 주기 (해당 속성이 있어야 스크롤 시 다음 영역이 보여짐)
• content에는 height: 100vh 주기! 그래야 부모 높이에 영향 받지 않음

  .container {
    position: relative;
    height: 350vh; /* 101vh 이상의 원하는 스크롤 값 주기 */
  }
  .sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 스크롤 시 height 0으로 줄어듦 */
    mask-image: radial-gradient(#fff, #000); /* 필수 속성 ! 없으면 스크롤 해도 다음 영역이 보이지 않음 */
  }
  /* absolute로 item 들이 모두 겹쳐진 상태. 따라서 z-index를 주기 */
  .item:nth-child(1) {
    z-index: 4;
  }
  .item:nth-child(2) {
    z-index: 3;
  }
  .item:nth-child(3) {
    z-index: 2;
  }
  .item:nth-child(4) {
    z-index: 1;
  }
  .item:nth-child(5) {
    z-index: 0;
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 부모는 100% -> 0%로 줄어들지만 자식은 스크롤 해도 영역이 줄어들지 않아야 하기에 100vh 값 주기 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
    font-weight: 700;
    color: #fff;
  }

JS

• scrollTrigger의 trigger 대상은 container로 지정
• 스크롤 시작과 끝지점은 각각 0% 0% / 100% 100%로 설정
• scrub 지정
• snap 설정 (옵션 설명은 주석 참고)
• 반복문을 돌려서 height: 0이 되는 애니메이션을 준다. 단, 마지막 아이템은 height 값이 0이 되면 안되기에 제외하고 설정한다.

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    start: '0% 0%',
    end: '100%, 100%',
    scrub: 0,
    snap: {
      snapTo: 'labels', // 타임라인에서 가장 가까운 라벨에 스냅
      duration: {min: 0.2, max: 1}, // 최소 0.2 최대 1초 동안
      delay: 0.1, // 스냅을 하기 전 0.1초 동안 지연
      // ease: 'power1.inOut' // 스냅 애니메이션의 ease (기본적으로 'power3')
    }
  }
});

const itemEls = document.querySelectorAll('.item');

itemEls.forEach(function(itemEl, index) {
  const lastIndex = itemEls.length - 1;

  if(index !== lastIndex) {
    tl.to(itemEl, {height: 0}, `a${index}`)
  }
});

😮 여기에 글씨 효과를 입히고 싶다면?

아래 데모와 같이 글자가 한쪽에서는 나타나고 반대편에서 사라지는 효과도 추가해볼 수 있다.
텍스트 영역 구조 추가로 기존 클래스명도 수정했다(item -> slide)

HTML

• 텍스트 영역은 slide의 부모인 slide-area와 형제 구조(absolute로 배치할 예정)
• 왼쪽 텍스트 개수: 6 / 오른쪽 텍스트 개수: 5

<div class="container">
  <div class="sticky">
    <ul class="brand-list left">
      <li class="brand-item">Adidas</li>
      <li class="brand-item">Calvin Klein</li>
      <li class="brand-item">Hourglass</li>
      <li class="brand-item">Eilish</li>
      <li class="brand-item">The Outset</li>
      <li class="brand-item">MAC</li>
    </ul>
    <ul class="brand-list right" aria-hidden="true">
      <li class="brand-item">Calvin Klein</li>
      <li class="brand-item">Hourglass</li>
      <li class="brand-item">Eilish</li>
      <li class="brand-item">The Outset</li>
      <li class="brand-item">MAC</li>
    </ul>
    <div class="slide-area">
      <div class="slide">
        <div class="content"></div>
      </div>
	<!-- ...이하 생략(slide 총 개수: 5) -->
    </div>
  </div>
</div>

CSS

• brand-list(텍스트 감싸는 요소) z-index를 slide보다 높게 설정한다.
• 그리고, brand-list는 absolute로 배치한다.
• 왼쪽 텍스트는 transform-origin을 left top으로 설정한다.
• 오른쪽 텍스트는 transform-origin을 right top으로 설정한다.
• 왼쪽 텍스트는 첫 번째 텍스트 제외하고는 처음에 보여지면 안되기에 scale(0) 값을 준다.

** transform-origin 이란?
transform의 기준점을 설정할 수 있는 속성으로 초기 값은 50% 50% 0(x축 y축 z축) 이다.

  .brand-list {
    z-index: 5; /* slide z-index 보다 높게 설정. 그래야 텍스트가 보여짐 */
    position: absolute; /* 텍스트 영역 absolute 배치 */
    display: flex;
    flex-direction: column;
  }
  .brand-list.left {
    top: 0;
    left: 0.4rem;
  }
  .brand-list.right {
    top: calc(50dvh + 1.04167vw);
    right: 0.72917vw;
    align-items: flex-end;
  }
  .brand-item {
    font-family: "Inter", sans-serif;
    font-size: 10vw;
    font-weight: 700;
    letter-spacing: -0.07em;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .brand-list.left .brand-item {
    padding-top: 1rem;
    line-height: .73;
    transform-origin: left top; /* transform 기준점 left top으로 설정 */
  }
  .brand-list.left .brand-item:not(:first-child) {
    /* 왼쪽은 첫 번째 텍스트 제외하고 안보이는 상태에서 스크롤 할 때마다 하나 씩 보여질 예정으로 기본 세팅으로 scale 0 적용*/
    transform: scale(0); 
  }
  .brand-list.right .brand-item {
    line-height: .79;
    transform-origin: right top; /* transform 기준점 right top으로 설정 */
  }

JS

• 왼쪽 텍스트와 오른쪽 텍스트에 대해 각각 반복문을 돌린다.

• nth-child에 i 값을 넣을 예정으로 i는 1부터 시작하도록 한다.

• 왼쪽 텍스트 개수: 6 / 오른쪽 텍스트 개수: 5로 왼쪽이 1개 더 많다. 왼쪽 맨 마지막 텍스트는 애니메이션 효과가 없어야 하므로 조건문을 왼쪽은 length 길이 보다 미만(<) 이도록 설정하고, 오른쪽은 이하(<=) 이도록 설정한다.

• 왼쪽 반복문 - 사라졌다가 나타남
  1) 스크롤 시 i 번째 텍스트는 yPercent 값 만큼 위쪽으로 이동한다.
  2) i + 1 번째 텍스트가 scale이 1이 되면서 나타난다.
  3) i 번 째 뒤에 있는 모든 텍스트들은 다음 스크롤 준비를 위해 yPercent 값 만큼 위쪽으로 이동한다. 나머지 텍스트들은 scale이 0인 상태라 위쪽으로 이동해도 그 모습이 화면에 보여지지 않는다.

• 오른쪽 반복문 - 나타났다가 사라짐
  1) i 번째 텍스트는 scale이 0이 되면서 사라진다.
  2) i 번 째 뒤에 있는 모든 텍스트들은 yPercent 값 만큼 위쪽으로 이동한다.

• slide 애니메이션(스크롤시 height 0 되는)과 동시 실행될 수 있도록 label 연결 a0, a1...
  a${i - 1} 인 이유는 텍스트 반복문에서 i가 1부터 시작하기 때문! 슬라이드 반복문에서는 index가 0부터 시작이다.

for(let i = 1; i < $('.brand-list.left .brand-item').length; i++) {
  tl.to(`.brand-list.left .brand-item:nth-child(${i})`, {
    yPercent: `-${i}00`,
  }, `a${i - 1}`)
    .to(`.brand-list.left .brand-item:nth-child(${i + 1})`, {
    scale: 1
  }, `a${i - 1}`)
    .to(`.brand-list.left .brand-item:nth-child(n + ${i + 1})`, {
    yPercent:`-${i}00`,
  }, `a${i - 1}`)
}

for(let i = 1; i <= $('.brand-list.right .brand-item').length; i++) {
  tl.to(`.brand-list.right .brand-item:nth-child(${i})`, {
    scale: 0,
  }, `a${i - 1}`)
    .to(`.brand-list.right .brand-item:nth-child(n + ${i + 1})`, {
    yPercent:`-${i}00`,
  }, `a${i - 1}`)
}

지역별 시간 구하기

Bennett & Clive 사이트는 푸터 영역에 사무실 위치와 현지 시간을 나타내는 UI가 있다.
이 부분을 어떻게 구현했는지 정리보고자 한다.

현재 시간 확인하기

new Date()를 사용해서 가져온 현재 날짜와 시간은 기본적으로 사용자의 PC에 설정 된 표준 시간대를 기준으로 표시된다. 만약 사용자 PC에 설정된 시간이 KST라면 'new Date()'를 사용할 경우 현재 한국 시간을 기준으로 날짜와 시간이 표현된다. 하지만, 사용자 PC의 표준시간대가 한국 표준시가 아닌 미국이나 캐나다에서 사용하는 동부 표준시나 중부 표준시로 설정이 되어 있다면, 해당 표준시간대에 해당하는 날짜와 시간이 보여질 것이다.

console.log(new Date()); // Tue Apr 09 2024 16:29:22 GMT+0900 (한국 표준시)

PC의 표준시간대 설정과 관계 없이 한국 시간텍스트 표시하기

// 1. 현재 시간(Locale) 가져오기
const current = new Date();

// 2. UTC 시간 계산
const utc = current.getTime() + (current.getTimezoneOffset() * 60 * 1000);

// 3. UTC to KST (UTC + 9시간)
const krTimeDiff = 9 * 60 * 60 * 1000;
const krCurrent = new Date(utc + (krTimeDiff));

console.log(krCurrent); // Tue Apr 09 2024 16:47:50 GMT+0900 (한국 표준시)

1) 현재 시간 (locale 시간) 가져오기

먼저 현재 시간을 가져온다. new Date()는 사용자 PC에 설정된 시간대 기준으로 시간을 표시해 준다.

const current = new Date();

2) UTC 시간 계산

getTime()

1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과된 밀리초를 반환

const current = new Date();
const time = current.getTime();

console.log(current); // Tue Apr 09 2024 17:42:51 GMT+0900 (한국 표준시)
console.log(time); // 1712652171137

getTimezoneOffset()

현재 사용자 PC 설정 시간대로부터 UTC 시간까지의 차이를 분 단위로 리턴

시간대 오프셋은 UTC와 현지 시간의 차이 (분)입니다. 이것은 로컬 시간대가 UTC보다 뒤떨어져 있으면 오프셋이 양수이고 앞에있을 경우 음수임을 의미합니다. 예를 들어, 시간대 UTC + 10 : 00 (오스트레일리아 동부 표준시, 블라디보스토크 시간, 차모로 표준시)의 경우 -600이 반환됩니다.
- MDN

// 호스트 장치의 현재 시간대 오프셋 가져 오기
const current = new Date();
const offset = current.getTimezoneOffset() / 60; // 나누기 60: 분 -> 시간 단위로 변경 

console.log(offset); // -9

KST(Korea Standard Time)는 UTC에 9시간을 더한 시간이다. 즉, UTC = KST - 9h 이다.

UTC 시간을 계산하기 위해 getTime()와 getTimezoneOffset() 함수에서 나온 분 단위의 시간을 밀리초 단위로 변환하여 더해주었다.

이제 UTC는 현재 시간을 UTC 시간으로 변환한 밀리초 값이다.

const utc = current.getTime() + (current.getTimezoneOffset() * 60 * 1000);

😥 단위 계산 방법이 헷갈려요.

1초 = 1,000 밀리초
1분 = 1000 * 60 = 60,000 밀리초
1시간 = 1000 * 60 * 60 = 3,600,000 밀리초

3) UTC to KST (UTC + 9시간)

한국 시간(KST)은 UTC 시간보다 9시간 더 빠르다. 9시간을 밀리초 단위로 변환하였다.

const krTimeDiff = 9 * 60 * 60 * 1000;

UTC 시간을 한국 시간으로 변환하기 위해 UTC 밀리초 값에 9시간(밀리초 단위로 변환한 값)을 더해 주었다. 그리고, new Date()를 사용하여, 밀리초 값을 date로 변환하였다.

const krCurrent = new Date(utc + (krTimeDiff));

이렇게 하면, 사용자 환경의 시간대가 어떻게 설정이 되어 있든 사용자에게 한국 시간을 보여줄 수 있다. krTimeDiff 값을 변경해준다면 한국뿐만 아니라 다른 나라의 시간도 보여줄 수 있다.

나는 이 방식을 응용하여 다른 지역의 시간도 구하였다.

📂 완성코드

CSS scrollbar-gutter 속성

로딩 모션이 끝나고 body 요소에 overflow: hidden 속성을 해제 하였는데, 스크롤바가 사라졌다가 생겨 스크롤바 너비만큼 뷰포트 너비가 바뀌어 화면이 약간 덜컹 거리는 느낌이 났다.

아래 버튼을 클릭해보자

이 부분을 수정하고 싶어서 찾아 보던 중 스크롤바 거터(gutter)의 존재에 대한 제어를 하는 CSS 속성을 알게 되었다.

CSS 속성을 사용 하면 작성자가 스크롤 막대를 위한 공간을 예약하여 콘텐츠가 커질 때 원치 않는 레이아웃 변경을 방지하는 동시에 스크롤이 필요하지 않을 때 불필요한 시각적 요소를 방지할 수 있습니다. - MDN

html {
  /* viewport 스크롤바에 여백을 원하는 경우 root"(html) 요소에 할당해야한다. */
  scrollbar-gutter: stable;
}

위 코드를 추가하였다. 다시 한번 버튼을 클릭해보자.

stable은 스크롤바가 없을 경우에도 스크롤바 영역을 생성하여, 스크롤바 유무에 상관없이 내부 콘텐츠 너비가 동일한 값을 가질 수 있도록 한다.

.box {
  scrollbar-gutter: stable;
}

both-edges는 stable과 함께 쓰이는 옵션으로, 스크롤바가 위치한 오른쪽뿐만 아니라 왼쪽에도 동일한 크기의 공간을 생성해 줌으로써, 좌우 정렬이 틀어져 보이지 않도록 도와준다.
(즉, 내용이 중앙에 오도록 상자 양쪽에 대칭 간격을 추가)

.box {
  scrollbar-gutter: stable both-edges;
}

지원 범위

아쉽게도 scrollbar-gutter 속성은 Safari 브라우저에서는 지원되지 않는다. 그러므로 scrollbar-gutter 를 사용하고자 한다면, 브라우저별 대응을 충분히 고려한 후 사용해야 한다.

참고 사이트
https://agal.tistory.com/213
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
https://velog.io/@kh8640/DropDown-2
https://wit.nts-corp.com/2024/02/06/6879
https://hianna.tistory.com/451