Tạo hiệu ứng cuộn ngược chiều đầy ấn tượng với Scroll-Driven Animations trong CSS

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

• Sử dụng CSS Scroll-Driven Animations (animation-timeline: view()) để tạo hiệu ứng chuyển động dựa trên vị trí cuộn mà không cần JavaScript.
• Kỹ thuật kết hợp masking bằng pseudo-elements và linear-gradient để tạo hiệu ứng mờ dần khi phần tử đi vào/ra khỏi vùng nhìn thấy.
• Giải pháp tối ưu cho trải nghiệm người dùng hiện đại, đồng thời tôn trọng cài đặt giảm chuyển động (reduced motion) của trình duyệt.

Trong thiết kế web hiện đại, đôi khi những ý tưởng "ngông cuồng" của các designer lại trở thành những điểm nhấn thú vị. Một trong số đó là hiệu ứng các cột nội dung di chuyển ngược chiều nhau khi người dùng cuộn trang. Nhờ vào các tính năng CSS mới, cụ thể là Scroll-Driven Animations, chúng ta có thể hiện thực hóa điều này một cách mượt mà và hiệu quả.

1. Cấu trúc HTML

Cấu trúc HTML rất đơn giản, bao gồm một phần tử cha chứa các cột, và bên trong mỗi cột là các phần tử nội dung:

<div class="opposing-columns">
  <div class="opposing-column">
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
  </div>
  <div class="opposing-column">
    <div class="opposing-item">...</div>
    <div class="opposing-item">...</div>
  </div>
</div>

2. Thiết lập CSS và Hiệu ứng Masking

Để tạo ảo giác các phần tử "biến mất" khi cuộn ra khỏi vùng nhìn thấy, chúng ta sử dụng pseudo-elements kết hợp với linear-gradient.

Sơ đồ quy trình masking:
[Vùng chứa cha] ➔ [:before (Gradient mờ trên)] ➔ [Nội dung cuộn] ➔ [:after (Gradient mờ dưới)]

Chúng ta định nghĩa các biến CSS để quản lý không gian:

Thuộc tính	Giá trị mẫu	Mô tả
--opposing-bg	lightcyan	Màu nền chủ đạo
--opposing-mask	3rem	Khoảng cách vùng mask
animation-range	entry 0% cover 100%	Phạm vi kích hoạt animation

3. Triển khai Scroll-Driven Animations

Điểm cốt lõi nằm ở thuộc tính animation-timeline: view(). Thay vì chạy theo thời gian, animation sẽ chạy theo tiến trình cuộn của phần tử trong vùng nhìn thấy.

.opposing-column {
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  animation-timing-function: linear;
}

Để tạo sự khác biệt giữa các cột, chúng ta sử dụng các @keyframes khác nhau cho từng cột:

• Cột 1: Di chuyển hướng lên.
• Cột 2: Di chuyển hướng xuống (ngược lại).
• Cột 3: Di chuyển với độ trễ/tốc độ lệch pha.

4. Tối ưu hóa và Khả năng tiếp cận

Việc tôn trọng người dùng là ưu tiên hàng đầu. Chúng ta nên sử dụng @media (prefers-reduced-motion: reduce) để vô hiệu hóa hiệu ứng cho những người dùng không muốn thấy chuyển động mạnh.

Nếu bạn là một lập trình viên đang tìm kiếm các giải pháp tối ưu cho trải nghiệm người dùng, việc kết hợp các kỹ thuật CSS này sẽ giúp website của bạn trở nên sống động hơn. Tương tự như cách các nhà phát triển tối ưu hóa trải nghiệm trong Đánh giá Assassin's Creed Black Flag Resynced: Bản làm lại tuyệt đẹp nhưng thiếu chiều sâu, việc chú trọng vào chi tiết nhỏ trong UI/UX luôn tạo ra sự khác biệt lớn.

Ngoài ra, nếu bạn quan tâm đến việc cân bằng giữa sáng tạo nghệ thuật và kỹ thuật, hãy tham khảo thêm về cách các studio lớn áp dụng công nghệ tại Aniplex - Nhà sản xuất 'Demon Slayer' chính thức mở cửa với AI.

Kết luận

Scroll-driven animations là một công cụ mạnh mẽ trong bộ công cụ của Frontend Developer. Mặc dù hỗ trợ trình duyệt đang dần hoàn thiện, bạn hoàn toàn có thể sử dụng @supports (animation-timeline: view()) để cung cấp trải nghiệm dự phòng cho các trình duyệt chưa hỗ trợ. Hãy thử nghiệm và tạo ra những giao diện cuộn trang đầy mê hoặc ngay hôm nay!