CSS Scroll-driven Animations: Tạo hiệu ứng parallax chỉ với CSS

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 requestAnimationFrame hay throttle.
• Tự động respect prefers-reduced-motion khi 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.