Phần 01 – Giới thiệu khóa học

• Giới thiệu khoá học thiết kế hiệu ứng bằng Javascript và illustrator Xem video

Phần 02 – Cài đặt cơ bản

• Cài đặt cơ bản để bắt đầu học hiệu ứng Xem video

• Tích hợp thư viện bootstrap và fontawesome Xem video

Phần 03 – Cơ bản về keyframes và Timeline

• Chuyển động với keyframes Xem video

• Lý thuyết về Timeline Xem video

Phần 04 – Nâng cao về chuyển động sử dụng Timeline

• Thực hành về Timeline Xem video

• Xử lý thời gian trong TimeLine theo kiểu relative Xem video

• Xử lý thời gian trong TimeLine theo kiểu absolute Xem video

• Sử dụng tham số chuyển động bằng thuộc tính CSS Xem video

• Gia tốc, độ trễ, và thời lượng của chuyển động Xem video

• Triển khai nhiều chuyển động trong một dòng Xem video

• Hướng của chuyển động Xem video

Phần 05 – Cách truyền tham số chuyển động

• Truyền tham số chuyển động thông qua HTML thế nào Xem video

• Giải thích về việc gửi nhận dữ liệu Xem video

• Kết hợp truyền tham số với chuyển động Xem video

Phần 06 – Sử dụng callback, run, complete trong Timeline

• Sử dụng Callback trong khi thiết kế chuyển động Xem video

• Sử dụng Update, begin, run và complete Xem video

Phần 07 – Chuyển động sử dụng tham số from – to

• Tóm tắt kiến thức đã học Xem video

• Chuyển động sử dụng tham số from – to Xem video

Phần 08 – Sử dụng Charming JS

• Xử lý text chi tiết bằng ‘charming’ Xem video

• Sửa lỗi khoảng trắng khi sử dụng charming bằng white-space Xem video

• Xử lý hiệu ứng di chuột với anime và charming Xem video

Phần 09 – Kết hợp JavaScript và illustrator

• Vẽ bằng javascript SVG Xem video

• Vẽ hình bằng illustrator để làm chuyển động Xem video

• Hiểu nguồn gốc và nguyên lý vẽ chuyển động bằng javascript Xem video

Phần 10 – 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 Xem video

• Các bước biến hình đã thiết kế thành chuyển động Xem video

• Vẽ chữ, vẽ khung và làm chuyển động với Javascript Xem video

Phần 11 – 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 Xem video

• Làm chuyển động với khối HTML theo hình đã vẽ Xem video

• Áp dụng qui trình làm chuyển động Xem video

• Tạo layer mới trên HTML có sẵn Xem video

Phần 12 – 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 Xem video

• Chuyển động Timeline bằng javascript Xem video

• Sửa lỗi chuyển động cách 1 Xem video

• Sửa lỗi chuyển động cách 2 Xem video

Phần 13 – Sử dụng Scroll Monitor

• Project số 2 phần HTML CSS Xem video

• Sử dụng thư viện scroll Monitor Xem video

Phần 14 – Project số 2 phần vẽ illustrator

• Vẽ hình chuyển động trên phần mềm Illustrator Xem video

• Xử lý CSS cho phần hình thành một layer trên web Xem video

Phần 15 – Hoàn thiện hiệu ứng Project số 2

• Viết javascript xử lý phần hiệu ứng Xem video

• Kết hợp hiệu ứng scrollMonitor và anime Xem video

• Thực hành bài 3 chuyển động vẽ – phần HTML và CSS Xem video

• Thực hành bài 3 chuyển động vẽ – phần JS Xem video

Phần 16 – 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 Xem video

• Thực hành hiệu ứng biến đổi Xem video

Phần 17 – 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 Xem video

• Phần CSS cho layer số 1 Xem video

• Xử lý phần layer số 2 Xem video

• Xử lý javascript cách 1 Xem video

Phần 18 – 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 Xem video

• Hướng dẫn hiệu ứng số 2 Xem video

• Hướng dẫn hiệu ứng số 3 và 4 Xem video

Phần 19 – Giới thiệu hiệu ứng mặt nạ

• Giới thiệu hiệu ứng mặt nạ Xem video

• Phân tích chuyển động và xử lý HTML-CSS Xem video

• Thực hành bài tập đơn giản để hiểu bản chất của hiệu ứng Xem video

Phần 20 – 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 Xem video

• Bốn hàm sử dụng để tạo HTML và gắn nội dung HTML Xem video

• Cách bọc một thẻ HTML trong một thẻ HTML khác Xem video

• Cách 2 dùng để gói HTML bằng javascript Xem video

• Thực hành 6 hàm javascript đã học Xem video

Phần 21 – Thực hành đóng gói hiệu ứng mặt nạ

• Đóng gói hiệu ứng – phần HTML Xem video

• Đóng gói code sử dụng function Xem video

• Hoàn chỉnh phần plugin hiệu ứng Xem video

Phần 22 – Hoàn thiện hiệu ứng

• Tích hợp scroll Monitor Xem video

• Viết function hoàn thiện scroll Monitor Xem video