Bramus chia sẻ sự hứng thú của mình dành cho Ảnh động được liên kết bằng cách cuộn, chẳng hạn như HTML và CSS. Tuỳ chọn JavaScript tích hợp với WAAPI cũng bao gồm!
Phân cảnh:
- 00:00 – Mở đầu
- 00:15 – Ví dụ về đoạn giới thiệu và hé lộ
- 03:41 - Ảnh động được liên kết khi cuộn và được kích hoạt bằng thao tác cuộn
- 05:18 - Ví dụ cơ bản về việc sử dụng CSS (Tiến trình tài liệu, tiến trình cuộn, scroll(), animation-timeline)
- 12:31 – Ví dụ cơ bản về việc sử dụng JavaScript (ScrollTimeline)
- 14:06 - Tiến trình cuộn được đặt tên (scroll-timeline-name, scroll-timeline-axis)
- 20:31 - Mức chênh lệch tiến trình cuộn
- 25:05 - Các phần tử theo dõi khi chúng truy cập/thoát bằng cách sử dụng JavaScript (ViewDòng thời gian)
- 31:09 - Các yếu tố theo dõi khi chúng truy cập/thoát sử dụng CSS (view-timeline-name, view-timeline-axis)
- 32:02 - Xem phần lồng ghép tiến trình
- 33:07 - Xem ví dụ về tiến trình tiến độ (Quy trình đóng bìa, Danh sách Liên hệ Di chuyển/Di chuyển ra, Thẻ xếp chồng)
- 35:40 - Chơi ngay hôm nay!
- 38:04 - Phần kết
Tài nguyên:
- Bản minh hoạ hướng dẫn về ảnh bìa (CSS) → https://goo.gle/3SvEQbd
- Bản minh hoạ luồng nội dung (JS+WAAPI) → https://goo.gle/3F9S62h
- Bản minh hoạ tiến trình cuộn (CSS) → https://goo.gle/3F9S6zj
- Bản minh hoạ tiến trình cuộn (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Hiển thị hình ảnh khi nhập bản minh hoạ (CSS) → https://goo.gle/3F9S8XX
- Hiển thị hình ảnh khi truy cập bản minh hoạ (JS+WAAPI) → https://goo.gle/3Sto8JK
- Liệt kê bản minh hoạ hiệu ứng bay vào + bay ra (CSS) →https://goo.gle/3Svg3UE
- Liệt kê bản minh hoạ hiệu ứng bay vào + bay ra (JS+WAAPI) → https://goo.gle/3F9Saix
- Bản minh hoạ mục cuộn theo chiều ngang (CSS) → https://goo.gle/3SpaDe5
- Bản minh hoạ mục cuộn theo chiều ngang (JS+WAAPI) → https://goo.gle/3SAbcBz
- Ảnh bìa thị sai cho Tiêu đề cố định, được làm giả (JS+WAAPI) → https://goo.gle/3SKoMCR
Bản minh hoạ về cách xếp chồng (JS+WAAPI) → https://goo.gle/3VW0wjD
Thu thập cùng tất cả bản minh hoạ CSS → https://goo.gle/3F9ScqF
Tuyển tập cùng tất cả bản minh hoạ JS+WAAPI → https://goo.gle/3F9ScXH
Thông số kỹ thuật về ảnh động dạng cuộn liên kết → https://goo.gle/3F9SduJ
Ảnh động dạng cuộn liên kết đến Polyfill → https://goo.gle/3SyziN8
Vấn đề về CSS WG "Đưa trở lại Scroll-Offsets"→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
Xem các video khác trong loạt video HTTP 203 → http://goo.gle/HTTP203
Đăng ký theo dõi chương trình Nhà phát triển Google Chrome tại đây → https://goo.gle/ChromeDevs
Ngoài ra, nếu bạn thấy thích nội dung này, có thể bạn sẽ thích podcast HTTP203 → https://goo.gle/HTTP203Podcast