Chia Sẻ Khóa Học Modern Web Animation [Update Tháng 6-2024] [Khóa 6558 A]
Đi sâu vào Animations và Transitions, Web Animations API, Scroll Driven Animations và View Transitions API.
Những gì bạn sẽ học được:
- ✓ Tìm hiểu về CSS Animations & Transitions.
- ✓ Tìm hiểu về JavaScript Web Animations API mới.
- ✓ Khám phá chi tiết về scroll driven animation.
- ✓ Tạo page transition ấn tượng bằng View Transitions API.
Chào mừng đến với Modern Web Animations, đi sâu vào các kỹ thuật animation hiện đại mà không cần thư viện, chỉ cần browser API.
CSS Animations & Transitions đã có từ lâu. Nhưng gần đây, các API mới đã được giới thiệu cho các trình duyệt hiện đại để cải thiện hơn nữa hoạt ảnh trên web và cung cấp cho các nhà phát triển nhiều quyền kiểm soát hơn.
Trong số những bổ sung mới này có Web Animations API (WAAPI). Web Animations API mở khóa sức mạnh của animation engine của trình duyệt dành cho các developer. Nó cho phép chúng ta construct animation và kiểm soát playback của chúng với JavaScript. Đây là một trong những cách hiệu quả nhất để animate trên Web.
Ngoài ra, các tính năng mới đã được thêm vào CSS Animations cho phép chúng ta kiểm soát các animation khi người dùng cuộn. Bằng cách thêm các thuộc tính mới như animation-timeline, scroll-timeline và view-timeline, giờ đây chúng ta có thể có các animation không dựa trên thời gian mà dựa trên tiến trình cuộn hoặc dựa trên khả năng hiển thị của một phần tử nhất định trong viewport. Điều này mở ra cánh cửa để tạo các scroll driven animation ấn tượng mà không cần phải load bất kỳ thư viện bên ngoài nào.
Một bổ sung gần đây khác cho các trình duyệt hiện đại là sự ra mắt của View Transitions API. API này cho phép chúng ta dễ dàng tạo các animated transition giữa các trạng thái DOM khác nhau. Nó có thể đặc biệt hữu ích trong các Single Page Application (SPA) khi chúng ta cần có một animation khi điều hướng giữa các route khác nhau. Trước khi có View Transitions API, những loại animation này cực kỳ phức tạp để đạt được.
Trong khóa học này, chúng ta sẽ đề cập đến tất cả các chủ đề này một cách chi tiết. Và không chỉ vậy, chúng ta cũng sẽ có một phần về CSS Animations & Transitions cũ và thảo luận sâu về mọi khía cạnh của chúng. Chúng ta cũng sẽ có các ví dụ và bài tập thực tế cho mọi chủ đề được thảo luận.
Hãy tham gia ngay nếu bạn muốn hiện thực hóa website của mình!
Mục lục:
- ✓ 1. CSS Animations & Transitions.
- ✓ 2. Web Animations API.
- ✓ 3. Scroll Driven Animations.
- ✓ 4. View Transitions API.
Khóa học này dành cho ai:
- ✓ Các Web developer muốn tìm hiểu mọi thứ về hoạt ảnh trên trình duyệt.
- ✓ Các Web developer muốn tìm hiểu về các animation API mới như ✓ Web Animations API, scroll driven animations & View Transitions API.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU