Chúng tôi rất vui mừng được công bố việc phát hành khoá học video gồm 10 phần có tên "Khai thác sức mạnh của ảnh động do cuộn điều khiển". Khoá học này sẽ giúp bạn tìm hiểu tất cả về ảnh động do cuộn điều khiển bằng CSS hoặc JavaScript.
Bạn có thể xem bộ phim này trên YouTube. Tập đầu tiên được nhúng tại đây.
Ảnh động do cuộn?
Với ảnh động do cuộn, bạn có thể lấy một ảnh động CSS hoặc WAAPI hiện có và tạo ảnh động cho ảnh động đó khi cuộn. Do đó, ảnh động do cuộn mang lại kế thừa tất cả các lợi ích mà các API này mang lại. Điều này bao gồm cả ảnh động do cuộn tăng tốc phần cứng không bị giật khi luồng chính bị chặn.
Ảnh động do cuộn điều khiển có trong Chrome từ Chrome 115 và là ứng cử viên hoàn hảo để cải tiến dần.
Xem loạt video hoặc đọc tài liệu để tìm hiểu thêm về ảnh động do cuộn tạo.
Các tập
Khoá học này bao gồm 10 tập và được chia thành hai 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 do cuộn tạo ra, sau đó là một số ứng dụng thực tế.
- Tập 1: Giới thiệu.
- Tập 2: Các khái niệm cốt lõi:
scroll()
vàScrollTimeline
. - Tập 3: Các khái niệm cốt lõi:
view()
vàViewTimeline
. - Tập 4: Khái niệm cốt lõi: Giải mã các dải thời gian.
- Tập 5: Các khái niệm cốt lõi: Truy vấn theo dòng thời gian và Dòng thời gian được đặt tên.
- Tập 6: Ứng dụng thực tế: Thêm bóng cuộn vào Vùng chứa cuộn.
- Tập 7: Ứng dụng thực tế: Tạo ảnh động cho các thành phần theo nhiều hướng.
- Tập 8: Ứng dụng thực tế: Tạo ảnh động cho mô hình 3D và nhiều nội dung khác khi cuộn.
- Tập 9: Ứng dụng thực tế: Phát hiện tốc độ cuộn.
- Tập 10: Outro.
Bạn nên xem các tập theo thứ tự vì các tập này được xây dự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
- Tài liệu: Tạo ảnh động cho các phần tử khi cuộn bằng ảnh động do Cuộn điều khiển
- Bản minh hoạ và công cụ: scroll-driven-animations.style
- Tải tiện ích Trình gỡ lỗi DevTools