_1738753706398.png){kind=logo}
đ299,000
499,000What you'll learn
Sau khi học xong, học viên có thể biết cách "cover" lại các hiệu ứng và biến đổi lại theo logic từng website.
Course content
0 Sections
•
0 Lessons
•
0h 0m
Expand all section
Cài đặt cơ bản
2 Lessons
•
17 minutes 00 seconds
Cài đặt cơ bản để bắt đầu học hiệu ứng09:29
Tích hợp thư viện bootstrap và fontawesome07:31
Cơ bản về keyframes và Timeline
2 Lessons
•
24 minutes 18 seconds
Chuyển động với keyframes14:27
Lý thuyết về Timeline09:51
Nâng cao về chuyển động sử dụng Timeline
7 Lessons
•
54 minutes 35 seconds
Thực hành về TimeLine15:58
Xử lý thời gian trong TimeLine theo kiểu relative07:10
Xử lý thời gian trong TimeLine theo kiểu absolute03:25
Sử dụng tham số chuyển động bằng thuộc tính CSS05:04
Gia tốc, độ trễ, và thời lượng của chuyển động04:53
Triển khai nhiều chuyển động trong một dòng05:51
Hướng của chuyển động12:14
Cách truyền tham số chuyển động
3 Lessons
•
21 minutes 30 seconds
Truyền tham số chuyển động thông qua HTML thế nào05:38
Giải thích về việc gửi nhận dữ liệu08:24
Kết hợp truyền tham số với chuyển động07:28
Sử dụng callback, run, complete trong Timeline
2 Lessons
•
14 minutes 25 seconds
Sử dụng Callback trong khi thiết kế chuyển động09:44
Sử dụng Update, begin, run và complete04:41
Chuyển động sử dụng tham số from - to
2 Lessons
•
20 minutes 16 seconds
Tóm tắt kiến thức đã học14:11
Chuyển động sử dụng tham số from- to06:05
Sử dụng Charming js
3 Lessons
•
33 minutes 11 seconds
Xử lý text chi tiết bằng 'charming'12:16
Sửa lỗi khoảng trắng khi sử dụng charming bằng white-space12:26
Xử lý hiệu ứng di chuột với anime và charming08:29
Kết hợp Javascript và illustrator
3 Lessons
•
35 minutes 12 seconds
Vẽ bằng javascript SVG09:24
Vẽ hình bằng Illustrator để làm chuyển động09:57
Hiểu nguồn gốc và nguyên lý vẽ chuyển động bằng javascript15:51
Các bước thực hành biến hình đã thiết kế thành chuyển động
3 Lessons
•
29 minutes 58 seconds
Chuyển động đầu tiên - Phần 1 - vẽ chuyển động bằng Adobe Illustrator07:41
Các bước biến hình đã thiết kế thành chuyển động14:30
Vẽ chữ, vẽ khung và làm chuyển động với Javascript07:47
Thực hành làm chuyển động qua bài tập
4 Lessons
•
21 minutes 22 seconds
Làm bài tập chuyển động - phần setup cơ bản và chuẩn bị 2 layer05:12
Làm chuyển động với khối HTML theo hình đã vẽ09:02
Áp dụng qui trình làm chuyển động04:34
Tạo layer mới trên HTML có sẵn02:34
Thực hành vẽ chuyển động bằng illustrator và đưa vào Javascript
4 Lessons
•
17 minutes 01 seconds
Vẽ hình chuyển động trên Adobe illustrator05:50
Chuyển động Timeline bằng javascript03:50
Sửa lỗi chuyển động cách 103:39
Sửa lỗi chuyển động cách 203:42
Sử dụng Scroll Monitor
2 Lessons
•
15 minutes 16 seconds
Project số 2 phần HTML CSS06:46
Sử dụng thư viện scroll Monitor08:30
Project số 2 phần vẽ Illustrator
2 Lessons
•
11 minutes 50 seconds
Vẽ hình chuyển động trên phần mềm Illustrator08:08
Xử lý CSS cho phần hình thành một layer trên web03:42
Hoàn thiện hiệu ứng project số 2
4 Lessons
•
27 minutes 39 seconds
Viết javascript xử lý phần hiệu ứng07:08
Kết hợp hiệu ứng scrollMonitor và anime03:16
Thực hành bài 3 chuyển động vẽ - phần HTML và CSS09:45
Thực hành bài 3 chuyển động vẽ - phần JS07:30
Bản chất hiệu ứng biến đổi hình dạng trong Javascript
2 Lessons
•
14 minutes 13 seconds
Hiểu bản chất hiệu ứng biến đổi hình dạng trong Javascript08:03
Thực hành hiệu ứng biến đổi06:10
Phân tích và hướng dẫn các thao tác với hiệu ứng biến hình
4 Lessons
•
15 minutes 37 seconds
Phân tích phần cấu trúc của hiệu ứng02:34
Phần CSS cho layer số 105:38
Xử lý phần layer số 203:51
Xử lý javascript cách 103:34
Hoàn thiện bài tập hiệu ứng biến hình bằng Javascript
3 Lessons
•
19 minutes 41 seconds
Hoàn thiện hiệu ứng với cách số 215:15
Hướng dẫn hiệu ứng số 201:59
Hướng dẫn hiệu ứng số 3 và 402:27
Giới thiệu hiệu ứng mặt nạ
3 Lessons
•
20 minutes 50 seconds
Giới thiệu hiệu ứng mặt nạ03:04
Phân tích chuyển động và xử lý HTML-CSS06:02
Thực hành bài tập đơn giản để hiểu bản chất của hiệu ứng11:44
Sáu hàm javascript sử dụng đóng gói hiệu ứng
5 Lessons
•
36 minutes 53 seconds
Đóng gói hiệu ứng ở mức độ đơn giản08:03
Bốn hàm sử dụng để tạo HTML và gắn nội dung HTML07:44
Cách bọc một thẻ HTML trong một thẻ HTML khác05:12
Cách 2 dùng để gói HTML bằng javascript09:40
Thực hành 6 hàm javascript đã học06:14
Thực hành đóng gói hiệu ứng mặt nạ
3 Lessons
•
19 minutes 12 seconds
Đóng gói hiệu ứng - phần HTML11:14
Đóng gói code sử dụng function04:39
Hoàn chỉnh phần plugin hiệu ứng03:19
Hoàn thiện hiệu ứng
2 Lessons
•
18 minutes 40 seconds
Tích hợp scroll Monitor12:14
Viết function hoàn thiện scroll Monitor06:26
Instructor
Nguyễn Đức Việt