JavaScript 0줄
애니메이션이 전부 CSS에서 실행됩니다. 라이브러리가 필요 없습니다.
환영합니다
스크롤하면 위를 덮고 있던 커버가 올라갑니다.
아래로 스크롤
이 커버는 JS 없이 순수 CSS로 움직입니다.
특징
이 구간을 스크롤하면 카드가 차례로 나타납니다.
GPU 가속
브라우저가 컴포지터 스레드에서 알아서 최적화합니다.
정밀한 제어
animation-range로 언제 재생할지 정확히 지정합니다.
숫자로 보기
뷰포트에 들어오면 숫자가 커집니다.
0 KB
필요한 JavaScript
60fps
부드러운 애니메이션
85%
브라우저 지원율
구현 방식
animation-timeline: scroll(root)이 애니메이션을 문서 스크롤에 연결합니다animation-range가 시작·끝 스크롤 위치를 정합니다- 애니메이션 상태는 평범한 CSS 키프레임으로 정의합니다
- 스크롤 동기화에 JavaScript가 필요 없습니다
브라우저 지원
- Chrome 115+ ✅
- Edge 115+ ✅
- Firefox ❌ (플래그 필요)
- Safari ❌ (미지원)
- 미지원 브라우저에서는 이 카드들이 보이지 않습니다 — 폴백 데모를 보세요
성능
- 컴포지터 스레드에서 실행됩니다 (메인 스레드 밖)
- 스크롤 중 JavaScript가 실행되지 않습니다
- 메모리 사용이 적습니다
- 모바일에서 배터리 효율이 좋습니다