Chúng tôi tự hào thông báo về việc phát hành "Khai thác sức mạnh của ảnh động điều khiển cuộn", một khoá học gồm 10 phần qua video để tìm hiểu mọi thứ về ảnh động 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.
Hoạt ảnh khi cuộn?
Với ảnh động hướng cuộn, bạn có thể lấy ảnh động CSS hoặc WAAPI hiện có và tạo ảnh động khi cuộn. Do đó, ảnh động điều hướng cuộn 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 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 hướng cuộn có trong Chrome trên Chrome 115 và là ứng cử viên hoàn hảo cho tính năng nâng cao tăng dần.
Xem loạt video hoặc đọc tài liệu để tìm hiểu thêm về ảnh động theo hướng cuộn.
Các tập
Khoá học gồm 10 tập và được chia thành 2 phần lớn: giải thích các khái niệm cốt lõi tạo nên ảnh động theo thao tác cuộn, sau đó là một vài ứng dụng thực tế.
- Tập 1: Giới thiệu.
- Tập 2: Các khái niệm chính:
scroll()
vàScrollTimeline
. - Tập 3: Các khái niệm chính:
view()
vàViewTimeline
. - Tập 4: Các khái niệm cốt lõi: Làm rõ các phạm vi của dòng thời gian.
- 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 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 phần tử theo các hướng khác nhau.
- Tập 8: Ứng dụng thực tế: Tạo ảnh động cho mô hình 3D và các nội dung khác trên Scroll.
- Tập 9: Ứng dụng thực tế: Phát hiện tốc độ cuộn.
- Tập 10: Kết thúc.
Tốt nhất là các tập phim sẽ được xem theo thứ tự vì chúng được xây dựng dựa trên 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 hướng cuộn
- Bản minh hoạ và công cụ: scroll-navigation-animations.style
- Tải Tiện ích trình gỡ lỗi DevTools