CSS scroll-timeline으로 동적 애니메이션 구현하기

CSS scroll-timeline은 스크롤과 애니메이션을 연동하여 웹사이트에 동적인 시각 효과를 더하는 최신 기법입니다. 이 기술은 스크롤 진행에 따라 애니메이션을 실행하도록 설계되어, 사용자 경험을 크게 향상시킬 수 있습니다.

---

CSS scroll-timeline이란?

scroll-timeline은 CSS의 새로운 속성으로, 스크롤 이벤트와 애니메이션을 직접 연결할 수 있게 해주는 강력한 도구입니다. 과거에는 JavaScript를 활용해야 구현 가능했던 작업을 CSS만으로 처리할 수 있어 성능 및 유지보수 측면에서 효율적입니다.

주요 특징

1. 스크롤 진행에 따른 애니메이션 제어: 스크롤 위치를 기반으로 애니메이션의 진행을 세밀히 조정 가능.
2. CSS만으로 구현 가능: JavaScript 없이도 애니메이션과 스크롤을 연동 가능.
3. 성능 최적화: CSS 레벨에서 브라우저 렌더링 엔진이 최적화된 애니메이션을 처리.

---

1. CSS scroll-timeline의 기본 문법

scroll-timeline은 두 가지 속성으로 구성됩니다:

• scroll-timeline-name: 타임라인의 이름을 정의.
• scroll-timeline-axis: 타임라인이 적용되는 스크롤 축(block 또는 inline).

기본 문법 예제

.container {
  scroll-timeline-name: myTimeline;
  scroll-timeline-axis: block;
}

.animated-element {
  animation: fadeIn 1s linear;
  animation-timeline: myTimeline;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

---

2. CSS scroll-timeline으로 애니메이션 구현하기

스크롤에 따라 투명도 변화

아래는 스크롤 진행 상황에 따라 투명도가 변화하는 애니메이션 구현 예제입니다.

<div class="container">
  <h1 class="animated-element">스크롤로 변화하는 텍스트</h1>
</div>

.container {
  height: 200vh; /* 긴 페이지를 위해 설정 */
  scroll-timeline-name: opacityTimeline;
  scroll-timeline-axis: block;
}

.animated-element {
  animation: fadeEffect 1s linear;
  animation-timeline: opacityTimeline;
}

@keyframes fadeEffect {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

---

3. CSS scroll-timeline 축의 활용

scroll-timeline-axis 속성을 활용하면 가로 및 세로 스크롤 모두에 적용 가능합니다.

가로 스크롤 예제

<div class="horizontal-container">
  <div class="animated-box"></div>
</div>

.horizontal-container {
  display: flex;
  width: 200vw;
  scroll-timeline-name: slideTimeline;
  scroll-timeline-axis: inline;
}

.animated-box {
  width: 100px;
  height: 100px;
  background: red;
  animation: slideIn 1s linear;
  animation-timeline: slideTimeline;
}

@keyframes slideIn {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

이 예제는 가로 스크롤 진행에 따라 박스가 이동하는 애니메이션을 생성합니다.

---

4. scroll-timeline과 JavaScript의 결합

CSS만으로도 충분히 강력하지만, 복잡한 동작이나 조건부 애니메이션이 필요할 경우 JavaScript와 결합하면 더 큰 유연성을 제공합니다.

JavaScript로 scroll-timeline 제어하기

document.querySelector('.container').addEventListener('scroll', (e) => {
  console.log('스크롤 위치:', e.target.scrollTop);
});

---

5. scroll-timeline의 브라우저 호환성

scroll-timeline은 아직 모든 브라우저에서 완전히 지원되지 않으므로 기능 지원 여부를 확인하는 작업이 필요합니다.

지원 여부 확인

if (CSS.supports('scroll-timeline-name', 'example')) {
  console.log('scroll-timeline 지원됨');
} else {
  console.log('scroll-timeline 미지원');
}

---

CSS scroll-timeline은 스크롤과 애니메이션의 완벽한 조합을 제공하며, 사용자 경험을 강화하는 강력한 도구입니다. CSS만으로도 동적이고 매끄러운 애니메이션을 구현할 수 있어 개발 효율성을 높이고, 브라우저 성능까지 최적화할 수 있습니다.

이제 scroll-timeline을 활용해 한 단계 앞선 웹사이트 애니메이션을 구현해 보세요!