CSS Scroll-Driven Animation은 사용자의 스크롤 동작을 감지하여 자연스럽고 직관적인 애니메이션을 구현하는 최신 기술입니다. 이 글에서는 JavaScript 없이 CSS만으로 스크롤 기반 애니메이션을 적용하는 방법을 살펴보고, 다양한 실전 예제를 통해 활용법을 익혀보겠습니다.
웹사이트에서 사용자의 스크롤은 단순한 페이지 이동 이상의 의미를 가집니다. 최근에는 스크롤 이벤트를 활용하여 인터랙티브한 효과를 제공하는 것이 웹 디자인의 중요한 요소가 되고 있으며, 기존에는 이러한 효과를 구현하기 위해 JavaScript를 필수적으로 사용해야 했습니다. 그러나 최신 CSS 스펙에서는 Scroll Driven Animation 기능을 통해 CSS만으로도 부드러운 스크롤 애니메이션을 만들 수 있도록 지원합니다.
이 글에서는 Scroll Driven Animation의 원리를 이해하고, 이를 통해 동적인 인터랙션을 구현하는 방법을 살펴보겠습니다.
Scroll-Driven Animation이란?
Scroll Driven Animation은 사용자의 스크롤 위치를 기준으로 애니메이션을 실행하는 CSS 기능입니다. 기존에는 JavaScript의 scroll 이벤트나 Intersection Observer API를 활용해야 했으나, CSS만으로도 스크롤 기반 애니메이션을 구현할 수 있게 되었습니다.
이 기능은 크게 두 가지 방식으로 작동합니다:
- Scroll Progress 기반 애니메이션
- 스크롤 위치에 따라 특정 요소의 애니메이션 진행도를 조절
- animation-timeline: scroll(); 속성을 활용
- Scroll Snap 기반 애니메이션
- 특정 스크롤 지점에서 트리거되어 동작하는 애니메이션
- animation-range 속성을 활용하여 특정 구간에서만 애니메이션 실행
CSS Scroll-Driven Animation 기본 문법
Scroll-Driven Animation을 사용하기 위해서는 @scroll-timeline 규칙과 animation-timeline 속성을 활용해야 합니다.
예제 1: 스크롤 진행도에 따라 투명도 조절
@scroll-timeline --fade-in-scroll {
source: selector(#scroll-container);
scroll-offsets: start 0%, end 100%;
}
.element {
animation: fade-in linear;
animation-timeline: --fade-in-scroll;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
설명:
- @scroll-timeline을 사용하여 특정 요소의 스크롤 이벤트를 애니메이션 트리거로 지정
- scroll-offsets: start 0%, end 100%;을 활용하여 스크롤 시작부터 끝까지 애니메이션 진행
- .element 클래스에 animation-timeline: –fade-in-scroll;을 적용하여 스크롤 위치에 따라 투명도를 변경
다양한 Scroll-Driven Animation 활용법
Scroll Driven Animation을 활용하면 다양한 동적 인터랙션을 구현할 수 있습니다.
1. 배경 이미지 패럴랙스 효과
@scroll-timeline --parallax-scroll {
source: auto;
scroll-offsets: start 0%, end 100%;
}
.bg-image {
animation: parallax-move linear;
animation-timeline: --parallax-scroll;
}
@keyframes parallax-move {
from { transform: translateY(0px); }
to { transform: translateY(-50px); }
}
효과:
- 사용자가 페이지를 아래로 스크롤할 때 배경 이미지가 천천히 이동하여 패럴랙스 효과 구현
2. 섹션별 컨텐츠 페이드 인 효과
@scroll-timeline --section-fade {
source: selector(.section);
scroll-offsets: start 20%, end 60%;
}
.section {
animation: fade-in linear;
animation-timeline: --section-fade;
}
효과:
- 특정 섹션이 화면에 진입할 때 부드럽게 나타나는 애니메이션 적용
Scroll-Driven Animation의 장점과 한계
✅ 장점
- JavaScript 없이 CSS만으로 구현 가능
- 성능 최적화에 유리 (스크롤 이벤트 리스너 제거)
- 보다 직관적인 코드 작성 가능
❌ 한계
- 브라우저 지원 제한 (최신 크롬, 엣지, 사파리 일부 지원)
- 세밀한 제어가 어려울 수 있음 (복잡한 애니메이션은 여전히 JavaScript 필요)
CSS Scroll Driven Animation은 웹사이트에 동적 인터랙션을 추가하는 강력한 도구입니다. 기존 JavaScript 기반의 스크롤 애니메이션을 대체하면서 성능과 코드 간결성을 동시에 확보할 수 있습니다.
아직 브라우저 지원이 완벽하지 않지만, 향후 웹 표준으로 자리 잡을 가능성이 높은 만큼 미리 익혀두면 웹 인터랙션 디자인에서 큰 도움이 될 것입니다. 이 기능을 활용해 더욱 매끄럽고 사용자 친화적인 웹페이지를 구현해보세요!
