Giới thiệu "Khai thác sức mạnh của Ảnh động chuyển động cuộn"

Chúng tôi rất vui mừng thông báo ra mắt khoá học gồm 10 video "Khai phá sức mạnh của ảnh động dựa trên thao tác cuộn" để tìm hiểu mọi thứ về ảnh động dựa trên thao tác cuộn bằng CSS hoặc JavaScript.

Bạn có thể xem loạt phim này trên YouTube. Tập đầu tiên được nhúng tại đây.

Ảnh động dựa trên thao tác cuộn?

Với ảnh động dựa trên thao tác cuộn, bạn có thể lấy một ảnh động CSS hoặc WAAPI hiện có và làm cho ảnh động đó chuyển động khi cuộn. Do đó, ảnh động dựa trên thao tác cuộn sẽ kế thừa tất cả lợi ích mà các API này mang lại. Điều này bao gồm cả ảnh động dựa trên thao tác cuộn được tăng tốc phần cứng, không bị giật khi luồng chính bị chặn.

Ảnh động dựa trên thao tác cuộn có trong Chrome từ Chrome 115 và là lựa chọn hoàn hảo để cải tiến tăng dần.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

Xem loạt video hoặc đọc tài liệu để tìm hiểu thêm về ảnh động dựa trên thao tác cuộn.

Các tập

Khoá học này gồm 10 tập và được chia thành 2 phần lớn: phần giải thích các khái niệm cốt lõi tạo nên ảnh động dựa trên thao tác cuộn, sau đó là một số ứng dụng thực tế.

  1. Tập 1: Giới thiệu.
  2. Tập 2: Các khái niệm cốt lõi: scroll()ScrollTimeline.
  3. Tập 3: Các khái niệm cốt lõi: view()ViewTimeline.
  4. Tập 4: Các khái niệm cốt lõi: Giải thích rõ về phạm vi trên dòng thời gian.
  5. Tập 5: Các khái niệm cốt lõi: Tra cứu dòng thời gian và dòng thời gian có tên.
  6. Tập 6: Ứng dụng thực tế: Thêm bóng cuộn vào vùng chứa có thể cuộn.
  7. Tập 7: Ứng dụng thực tế: Tạo ảnh động cho các phần tử theo nhiều hướng.
  8. Tập 8: Ứng dụng thực tế: Tạo hiệu ứng cho mô hình 3D và nhiều nội dung khác khi cuộn.
  9. Tập 9: Ứng dụng thực tế: Phát hiện tốc độ cuộn.
  10. Tập 10: Lời kết.

Bạn nên xem các tập theo thứ tự vì chúng dựa trên các bản minh hoạ và kỹ thuật được đề cập trong các tập trước. Các bản minh hoạ và công cụ xuất hiện trong mỗi tập đều có trên mạng và được liên kết trong phần mô tả.

Tài nguyên khác