Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Modern Web Animations

Hiệu Ứng Web Hiện Đại

Hiệu Ứng Web Hiện Đại

Khám Phá Sâu Về Hiệu Ứng & Chuyển Tiếp, Web Animations API, Hiệu Ứng Theo Cuộn và View Transitions API

4.7
(108 đánh giá)
1,666 học viên
Giảng viên
Ali Alaa
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 999.000đ -95%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
15.0 giờ video
103 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Css #Frontend Development #Javascript #Web Development

Bạn sẽ học được gì

Tìm hiểu về CSS Animations & Transitions.
Tìm hiểu về Web Animations API mới trong JavaScript.
Khám phá chi tiết về hiệu ứng theo cuộn trang.
Tạo hiệu ứng chuyển trang ấn tượng với View Transitions API.

Yêu cầu

Yêu cầu có kiến thức cơ bản về HTML, CSS & JavaScript.

Đối tượng phù hợp

Dành cho lập trình viên web muốn học mọi thứ về tạo hiệu ứng trong trình duyệt.
Dành cho lập trình viên web muốn tìm hiểu về các API hiệu ứng mới như Web Animations API, hiệu ứng theo cuộn & View Transitions API.

Nội dung khóa học

4 phần • 103 bài giảng
1 Trước Khi Xem Khóa Học
2 Thiết Lập Thư Mục Dự Án
3 Giới Thiệu Về CSS Transitions
4 Sử Dụng CSS Transition với JavaScript
5 Sử Dụng Sự Kiện Transition trong JavaScript
6 Hành Vi Chuyển Tiếp & Hiệu Ứng Rời Rạc
7 Tạo Hiệu Ứng cho Phần Tử Từ `display: none` Sang `display: block`
8 Sử Dụng Quy Tắc `@starting-style`
9 Tìm Hiểu Thêm Về `@starting-style`
10 Mã Mẫu Cho Timing Functions
11 Linear Timing Functions
12 Hiệu Ứng Mượt Mà Với Cubic Bezier Timing Functions
13 Hiệu Ứng Nhảy Bước Sử Dụng Steps Timing Function
14 Giới Thiệu Về CSS Animations
15 Các Thuộc Tính CSS Animations
16 Thêm Nhiều Hiệu Ứng Cùng Lúc
17 Animation Composition
18 Animation Fill Mode
19 Tìm Hiểu Thêm Về Quy Tắc `@keyframe`
20 Sự Kiện JavaScript Cho Animations
21 Hiệu Ứng Rời Rạc
22 Bài Tập Về Animations (Phần 1)
23 Bài Tập Về Animations (Phần 2)
24 Bài Tập Về Animations (Phần 3)
25 Bài Tập Về Animations (Phần 4)
1 Khi Nào Nên Dùng Web Animations API
2 Timeline, Animation Objects & Animation Effects
3 Tạo Hiệu Ứng Đầu Tiên Sử Dụng Web Animations API
4 Một Cách Khác Để Định Nghĩa Keyframes
5 Lưu Ý Nhanh!
6 Iteration Composite
7 Điều Khiển Hiệu Ứng Bằng Các Phương Thức Animation Object
8 Cập Nhật Animation Effect (Keyframe Effect)
9 Lấy Thông Tin Về Hiệu Ứng
10 Tìm Hiểu Thêm Về Thuộc Tính `currentTime`
11 Tìm Hiểu Thêm Về Thuộc Tính `startTime`
12 Trạng Thái Pending & Promise `ready`
13 Promise `finished`, Sự Kiện `finish` và `cancel`
14 Lấy Tất Cả Hiệu Ứng Trong Tài Liệu Hoặc Một Phần Tử
15 Duy Trì Kiểu Hiệu Ứng Đã Hoàn Thành Với `commitStyles`
16 Trình Duyệt Tự Động Xóa Hiệu Ứng
17 Tổng Quan Bài Tập Web Animations API
18 Bài Tập: Tạo Hiệu Ứng Cho Nhân Vật
19 Tạo Hiệu Ứng Cho Đường Phố, Nền Sau và Nền Trước
20 Tạm Dừng Toàn Bộ Cảnh
21 Tăng Tốc và Giảm Tốc Cho Nhân Vật
22 Thêm và Tạo Hiệu Ứng Bóng Cho Nhân Vật
23 Thêm Xe Ngẫu Nhiên Vào Cảnh
24 Ngẫu Nhiên Hóa Tốc Độ và Thời Điểm Xuất Hiện Của Xe
25 Tạo Hiệu Ứng Bánh Xe
1 Tổng Quan Về Hiệu Ứng Dựa Trên Cuộn
2 Named Scroll Progress Timelines
3 Anonymous Scroll Progress Timelines
4 Tùy Chỉnh Phạm Vi Hiệu Ứng
5 Timeline Scope
6 Named View Progress Timelines
7 View Timeline Inset
8 Anonymous View Progress Timelines
9 Named Timeline Ranges
10 Tóm Tắt Named Timeline Ranges
11 Tạo Scroll Progress Timelines Sử Dụng Web Animations JS API
12 Tạo View Progress Timelines Sử Dụng Web Animations JS API
13 Tổng Quan Bài Tập
14 Nguồn Tài Nguyên
15 [Bài Tập] Tạo Hiệu Ứng Đường Dẫn SVG Logo
16 [Bài Tập] Tạo Hiệu Ứng Nền Header
17 [Bài Tập] Tạo Hiệu Ứng Phần Hero (Phần 1)
18 [Bài Tập] Tạo Hiệu Ứng Phần Hero (Phần 2)
19 [Bài Tập] Tạo Hiệu Ứng Phần Tính Năng
20 [Bài Tập] Tạo Hiệu Ứng Phần Thành Viên Nhóm (Phần 1)
21 [Bài Tập] Tạo Hiệu Ứng Phần Thành Viên Nhóm (Phần 2)
22 [Bài Tập] Tạo Hiệu Ứng Phần Dịch Vụ (Phần 1)
23 [Bài Tập] Tạo Hiệu Ứng Phần Dịch Vụ (Phần 2)
24 [Bài Tập] Tắt Hiệu Ứng Theo Tùy Chọn Người Dùng
25 [Bài Tập] Sửa Kiểu Cho Trình Duyệt Không Hỗ Trợ
1 Giới Thiệu & Ứng Dụng Demo
2 Nguồn Tài Nguyên
3 Bắt Đầu Với View Transitions API
4 Tùy Chỉnh Hiệu Ứng Mờ Dần Mặc Định
5 Tách Riêng Phần Tử Để Kiểm Soát Hiệu Ứng Chuyển Tiếp Tốt Hơn
6 Thêm View Transition Name Một Cách Động
7 Các Phương Thức & Promise Của Đối Tượng ViewTransition
8 Sử Dụng View Transition Promises Để Cuộn Phần Tử Vào Tầm Nhìn
9 Biến Đổi Hình Ảnh Thu Nhỏ Thành Ảnh Lớn
10 Biến Đổi Hình Ảnh Thu Nhỏ Thành Ảnh Lớn (Tiếp)
11 Tạo Hiệu Ứng Phần Tử Lưới Với View Transition Name Động
12 Thay Đổi Hiệu Ứng Chuyển Tiếp Cho Người Dùng Thích Giảm Chuyển Động
13 Tạo Hiệu Ứng Cho Phần Tử Giả View Transitions Với Web Animations API
14 Lưu Ý Cho Các Bài Học Tiếp Theo
15 [Bài Tập Game Chữ] Giới Thiệu
16 [Bài Tập Game Chữ] Nguồn Tài Nguyên
17 [Bài Tập Game Chữ] Tạo Hiệu Ứng Cho Các Chữ Cái
18 [Bài Tập Game Chữ] Tạo Hiệu Ứng Cho Mạng và Xu
19 [Bài Tập Game Chữ] Xử Lý Chữ Cái Trùng Lặp
20 [Bài Tập Game Chữ] Tạo Hiệu Ứng Cho Modal
21 Sử Dụng View Transitions Với Các Framework JS [Ví Dụ ReactJS & Svelte]
22 Sử Dụng View Transitions Với Ứng Dụng Một Trang (SPA)
23 [Ví Dụ SvelteKit] Giới Thiệu
24 [SvelteKit] Sử Dụng `onNavigate` Để Khởi Tạo View Transition Giữa Các Route
25 [SvelteKit] Tạo Hiệu Ứng Cho Hình Ảnh
26 [SvelteKit] Hiệu Ứng Chuyển Tiếp Khác Cho Màn Hình Di Động
27 [Cập Nhật] Cross Document View Transitions
28 [Cập Nhật] Cross Document View Transitions (Tiếp)

Giới thiệu khóa học

Welcome to Modern Web Animations, a deep dive into modern animation techniques with no libraries, only browser APIs.


CSS Animations & Transitions have been around for a long time now. But recently new APIs were introduced to modern browsers to further improve animating on the web and give developers more control.


Among these new additions is the Web Animations API (WAAPI). The Web Animations API unlocks the power of the browser's animation engine for developers. It allows us to construct animations and control their playback with JavaScript. It is one of the most performant ways to animate on the Web.


In addition to that, new features were added to CSS Animations that allow us to control animations as users scroll. By adding new properties like animation-timeline, scroll-timeline and view-timeline, we can now have animations that are not based on time but based on scrolling progress or based on the visibility of a certain element in the viewport. This opens the door to creating impressive scroll driven animations without having to load any external libraries.


Another recent addition to modern browsers is the introduction of the View Transitions API. This API allows us to easily create animated transitions between different DOM states. It can be especially useful in Single Page Applications (SPAs) when we need to have an animation when navigating between different routes. Before the View Transitions API these kinds of animations were extremely complicated to achieve.


In this course we are going to cover all of these topics in great detail. And not only that, but we are also going to have a section on old CSS Animations & Transitions and discuss every aspect of them in depth. We are also going to have practical examples and exercises for every topic discussed.


So join now if you want to bring your websites to life!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Css
Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊