웹사이트에서 스크롤링은 단순한 페이지 이동 이상의 경험을 제공합니다. 최신 CSS 기술인 Scroll-Linked Animations는 사용자의 스크롤 동작과 애니메이션을 연결하여 역동적인 사용자 경험을 창출합니다. JavaScript 의존도를 줄이고 성능을 향상시키며, 보다 직관적인 코드 작성이 가능해졌습니다. 이번 글에서는 Scroll-Linked Animations의 기본 원리와 활용 방법, 그리고 사례를 소개합니다.
1. Scroll-Linked Animations란?
Scroll Linked Animations는 사용자의 스크롤 이벤트를 기반으로 CSS 애니메이션을 동작하게 하는 기법입니다.
CSS와 Scroll Linked Animations API를 사용하여 DOM 요소의 애니메이션을 스크롤 위치에 따라 동적으로 제어할 수 있습니다.
주요 특징
- 직관적 코드 작성: CSS 속성과 API를 활용하여 간단히 구현 가능.
- 부드러운 사용자 경험: 스크롤과 애니메이션이 매끄럽게 연결됨.
- 퍼포먼스 최적화: 브라우저의 기본 렌더링 성능을 활용하여 효율적 실행.
2. CSS Scroll-Timeline 속성
기본 구조
Scroll Linked Animations는 @scroll-timeline 규칙과 animation-timeline 속성을 조합하여 동작합니다.
@scroll-timeline {
name: my-scroll-animation;
source: auto; /* 스크롤 이벤트 소스 지정 */
orientation: block; /* 수직 스크롤 기준 */
}
- name: 타임라인 이름을 설정합니다.
- source: 타임라인 소스(주로 스크롤 컨테이너)를 정의합니다.
- orientation:
block(수직) 또는inline(수평) 방향 설정이 가능합니다.
3. Scroll-Linked Animations 구현
(1) 기본 예제: 이미지 페이드 인
스크롤을 내릴수록 이미지가 서서히 나타나는 애니메이션입니다.
HTML
<div class="scroll-container"> <img src="example.jpg" class="fade-in"> </div>
CSS
@scroll-timeline {
name: fade-in-timeline;
source: auto;
}
.fade-in {
animation: fade-in-animation 1s linear both;
animation-timeline: fade-in-timeline;
}
@keyframes fade-in-animation {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
스크롤 진행에 따라 이미지가 부드럽게 나타나는 효과를 볼 수 있습니다.
(2) 고급 활용: 요소 크기 확대
스크롤에 따라 카드 요소가 점차 확대되는 애니메이션을 추가합니다.
HTML
<div class="scroll-container"> <div class="card">Scroll me!</div> </div>
CSS
@scroll-timeline {
name: scale-timeline;
source: auto;
}
.card {
animation: scale-animation 1s linear both;
animation-timeline: scale-timeline;
}
@keyframes scale-animation {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
스크롤 진행에 따라 카드의 크기가 확대되는 효과가 적용됩니다.
4. Scroll-Linked Animations 활용 사례
(1) 스크롤에 따른 텍스트 강조
- 페이지의 특정 영역을 지나갈 때 텍스트 색상이 변경되도록 설정합니다.
- 사용자 주의를 끌기 위한 UX 디자인 요소로 적합합니다.
@scroll-timeline {
name: highlight-timeline;
source: auto;
}
.text {
animation: text-highlight 1s linear both;
animation-timeline: highlight-timeline;
}
@keyframes text-highlight {
from {
color: black;
}
to {
color: blue;
}
}
(2) 배경 이미지의 패럴랙스 효과
- 스크롤에 따라 배경 이미지가 이동하여 깊이감을 부여합니다.
@scroll-timeline {
name: parallax-timeline;
source: auto;
}
.background {
animation: parallax-animation 1s linear both;
animation-timeline: parallax-timeline;
}
@keyframes parallax-animation {
from {
background-position: center top;
}
to {
background-position: center bottom;
}
}
5. Scroll-Linked Animations 적용 팁
(1) 브라우저 지원 확인
Scroll Linked Animations API는 현재 일부 최신 브라우저에서만 지원됩니다.
- 폴백(fallback)을 제공하여 모든 사용자에게 적절한 경험을 보장해야 합니다.
(2) 성능 최적화
- 애니메이션 요소의 개수를 최소화하여 렌더링 성능을 유지합니다.
- GPU 가속을 활용하는 속성(transform, opacity 등)을 사용하는 것이 좋습니다.
(3) JavaScript와 결합
CSS만으로는 구현하기 어려운 복잡한 로직은 JavaScript의 Intersection Observer API와 결합하여 확장 가능합니다.
Scroll-Linked Animations는 사용자와 인터랙션하는 웹사이트에 새로운 생동감을 부여합니다. 최신 CSS 기능을 활용하여 성능을 유지하면서도 직관적인 애니메이션을 구현할 수 있습니다. 위에서 소개한 기본 및 고급 활용법을 통해 여러분의 웹 프로젝트에 역동적인 경험을 더해보세요!
