Tin mới nhất

Menu

Browsing "Older Posts"

Bài Viết Về Chủ Đề " View Transitions API "

Chia Sẻ Khóa Học Modern Web Animation [Update Tháng 6-2024] [Khóa 6558 A]

21 tháng 7 2024 / No Comments

Đ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




Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
Tuyên bố miễn trừ bản quyền:
Trang web này không lưu trữ bất kỳ tệp nào trên máy chủ của nó. Chúng tôi chỉ lập chỉ mục và liên kết đến nội dung được cung cấp bởi các trang web khác. Vui lòng liên hệ với các nhà cung cấp nội dung để xóa nội dung bản quyền nếu có và gửi email cho chúng tôi, chúng tôi sẽ xóa các liên kết hoặc nội dung có liên quan ngay lập tức.