CSS Scroll-driven Animations: Tạo hiệu ứng parallax chỉ với CSS
Scroll-driven Animations API cho phép tạo parallax, progress bars, và reveal animations chỉ bằng CSS thuần — không cần JavaScript hay IntersectionObserver.
Mỗi lần cần scroll animation, bạn phải reach for JavaScript — IntersectionObserver, scroll event listeners, hoặc GSAP ScrollTrigger. Scroll-driven Animations thay đổi hoàn toàn điều này: parallax, progress indicators, reveal effects — tất cả bằng CSS.
Hai loại scroll timelines
API cung cấp 2 loại timeline:
- Scroll Progress Timeline — animation progress gắn với scroll position của scroll container.
- View Progress Timeline — animation progress gắn với vị trí element trong viewport (giống IntersectionObserver).
Scroll Progress: Reading progress bar
Use case kinh điển — progress bar hiển thị bạn đã đọc bao nhiêu % trang:
.reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--primary);
transform-origin: left;
/* Gắn animation với scroll progress */
animation: grow-progress linear;
animation-timeline: scroll();
}
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
Chỉ cần thêm animation-timeline: scroll() — browser tự gắn animation progress với scroll position. Không cần một dòng JavaScript.
View Progress: Reveal on scroll
Muốn elements fade in khi scroll vào viewport? Trước đây cần IntersectionObserver + CSS class toggle. Giờ:
.reveal-card {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
@keyframes reveal {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Parallax effect cho hero image */
.hero-bg {
animation: parallax linear;
animation-timeline: scroll();
}
@keyframes parallax {
from { transform: translateY(0); }
to { transform: translateY(-30%); }
}
animation-range: entry 0% entry 100% nghĩa là animation chạy từ lúc element bắt đầu enter viewport đến khi hoàn toàn visible. Bạn có thể fine-tune với cover, contain, exit.
Performance benefits
Scroll-driven animations chạy trên compositor thread — smooth 60fps mà không block main thread. So với JavaScript scroll listeners:
- Không jank khi main thread busy.
- Không cần
requestAnimationFramehay throttle. - Tự động respect
prefers-reduced-motionkhi bạn dùng với media query.
Thực tế áp dụng
Mình đã dùng cho:
- Reading progress bar trên blog — zero JS, pure CSS.
- Section reveal — cards fade in khi scroll, không cần animation library.
- Sticky header shrink — header thu nhỏ dần khi scroll xuống.
- Parallax hero — background di chuyển chậm hơn foreground.
Browser support
Chrome/Edge đã ship. Firefox đang implement. Safari đang behind. Dùng progressive enhancement — nếu browser không support, elements chỉ hiển thị static, không bị broken.
Kết
Scroll-driven Animations loại bỏ nhu cầu JavaScript cho phần lớn scroll effects. Performant hơn, declarative hơn, và dễ maintain hơn. Đây là tương lai của scroll-based interactions trên web.
Admin
Bình luận (0)
Đăng nhập để bình luận
Chưa có bình luận nào. Hãy là người đầu tiên!