
Lợi ích từ khoá học
- 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.
Phù hợp với
- Đối tượng học của khoá này là các freelancer thiết kế website muốn thiết kế website cao cấp, các lập trình frontend muốn tự thiết kế các hiệu ứng theo logic của chương trình, hoặc các bạn sinh viên muốn nâng cao trình đồ lập trình hiệu ứng của mình bằng cách kết hợp giữa thiết kế và javascript.
- Vấn đề mà khoá học này giải quyết là kết hợp giữa công cụ vẽ vector mạnh nhất của adobe là illustrator và công cụ viết hiệu ứng tương tác phổ biến nhất khi lập trình web là Javascript. Kết hợp để tạo nên hiệu ứng đẹp theo logic mong muốn.
Mô tả tổng quát
- Điểm khác biệt là đây là khoá học đầu tiên kết hợp công cụ thiết kế và công cụ lập trình khi xây dựng ứng dụng web.
- Cách học chính của khoá học là học qua các bài tập thực hành, nền tảng lý thuyết và các công cụ sử dụng sẽ hình thành qua các bài tập thực hành.
- Khi nắm được phương pháp kết hợp giữa công cụ vẽ tự do illustrator và công cụ lập trình logic JS bạn có khả năng tự điều chỉnh, thiết kế, tương tác theo ý muốn.
Yêu cầu khoá học
- Máy tính cấu hình bình thường. Khuyến cáo Ram từ 4G trở lên.
Cài đặt cơ bản

Cài đặt cơ bản để bắt đầu học hiệu ứng
9:29 phút

Tích hợp thư viện bootstrap và fontawesome
7:32 phút
Cơ bản về keyframes và Timeline

Chuyển động với keyframes
14:27 phút

Lý thuyết về Timeline
9:52 phút
Nâng cao về chuyển động sử dụng Timeline

Thực hành về TimeLine
15:58 phút

Xử lý thời gian trong TimeLine theo kiểu relative
7:10 phút

Xử lý thời gian trong TimeLine theo kiểu absolute
3:26 phút

Sử dụng tham số chuyển động bằng thuộc tính CSS
5:04 phút

Gia tốc, độ trễ, và thời lượng của chuyển động
4:53 phút

Triển khai nhiều chuyển động trong một dòng
5:51 phút

Hướng của chuyển động
12:14 phút
Cách truyền tham số chuyển động

Truyền tham số chuyển động thông qua HTML thế nào
5:38 phút

Giải thích về việc gửi nhận dữ liệu
8:24 phút

Kết hợp truyền tham số với chuyển động
7:28 phút
Sử dụng callback, run, complete trong Timeline

Sử dụng Callback trong khi thiết kế chuyển động
9:45 phút

Sử dụng Update, begin, run và complete
4:42 phút
Chuyển động sử dụng tham số from - to

Tóm tắt kiến thức đã học
14:11 phút

Chuyển động sử dụng tham số from- to
6:05 phút
Sử dụng Charming js

Xử lý text chi tiết bằng 'charming'
12:16 phút

Sửa lỗi khoảng trắng khi sử dụng charming bằng white-space
12:26 phút

Xử lý hiệu ứng di chuột với anime và charming
8:30 phút
Kết hợp Javascript và illustrator

Vẽ bằng javascript SVG
9:25 phút

Vẽ hình bằng Illustrator để làm chuyển động
9:57 phút

Hiểu nguồn gốc và nguyên lý vẽ chuyển động bằng javascript
15:52 phút
Các bước thực hành biến hình đã thiết kế thành chuyển động

Chuyển động đầu tiên - Phần 1 - vẽ chuyển động bằng Adobe Illustrator
7:42 phút

Các bước biến hình đã thiết kế thành chuyển động
14:30 phút

Vẽ chữ, vẽ khung và làm chuyển động với Javascript
7:47 phút
Thực hành làm chuyển động qua bài tập

Làm bài tập chuyển động - phần setup cơ bản và chuẩn bị 2 layer
5:12 phút

Làm chuyển động với khối HTML theo hình đã vẽ
9:03 phút

Áp dụng qui trình làm chuyển động
4:34 phút

Tạo layer mới trên HTML có sẵn
2:34 phút
Thực hành vẽ chuyển động bằng illustrator và đưa vào Javascript

Vẽ hình chuyển động trên Adobe illustrator
5:50 phút

Chuyển động Timeline bằng javascript
3:50 phút

Sửa lỗi chuyển động cách 1
3:40 phút

Sửa lỗi chuyển động cách 2
3:42 phút
Sử dụng Scroll Monitor

Project số 2 phần HTML CSS
6:46 phút

Sử dụng thư viện scroll Monitor
8:31 phút
Project số 2 phần vẽ Illustrator

Vẽ hình chuyển động trên phần mềm Illustrator
8:09 phút

Xử lý CSS cho phần hình thành một layer trên web
3:43 phút
Hoàn thiện hiệu ứng project số 2

Viết javascript xử lý phần hiệu ứng
7:08 phút

Kết hợp hiệu ứng scrollMonitor và anime
3:17 phút

Thực hành bài 3 chuyển động vẽ - phần HTML và CSS
9:45 phút

Thực hành bài 3 chuyển động vẽ - phần JS
7:30 phút
Bản chất hiệu ứng biến đổi hình dạng trong Javascript

Hiểu bản chất hiệu ứng biến đổi hình dạng trong Javascript
8:04 phút

Thực hành hiệu ứng biến đổi
6:11 phút
Phân tích và hướng dẫn các thao tác với hiệu ứng biến hình

Phân tích phần cấu trúc của hiệu ứng
2:35 phút

Phần CSS cho layer số 1
5:38 phút

Xử lý phần layer số 2
3:51 phút

Xử lý javascript cách 1
3:35 phút
Hoàn thiện bài tập hiệu ứng biến hình bằng Javascript

Hoàn thiện hiệu ứng với cách số 2
15:15 phút

Hướng dẫn hiệu ứng số 2
2:00 phút

Hướng dẫn hiệu ứng số 3 và 4
2:27 phút
Giới thiệu hiệu ứng mặt nạ

Giới thiệu hiệu ứng mặt nạ
3:05 phút

Phân tích chuyển động và xử lý HTML-CSS
6:03 phút

Thực hành bài tập đơn giản để hiểu bản chất của hiệu ứng
11:44 phút
Sáu hàm javascript sử dụng đóng gói hiệu ứng

Đóng gói hiệu ứng ở mức độ đơn giản
8:04 phút

Bốn hàm sử dụng để tạo HTML và gắn nội dung HTML
7:45 phút

Cách bọc một thẻ HTML trong một thẻ HTML khác
5:12 phút

Cách 2 dùng để gói HTML bằng javascript
9:40 phút

Thực hành 6 hàm javascript đã học
6:14 phút
Thực hành đóng gói hiệu ứng mặt nạ

Đóng gói hiệu ứng - phần HTML
11:14 phút

Đóng gói code sử dụng function
4:39 phút

Hoàn chỉnh phần plugin hiệu ứng
3:20 phút
Hoàn thiện hiệu ứng

Tích hợp scroll Monitor
12:15 phút

Viết function hoàn thiện scroll Monitor
6:26 phút