Khóa học Thiết kế hiệu ứng bảng JavaSript và Illustrator – Miễn phí
Khóa học Thiết kế hiệu ứng bảng JavaSript và Illustrator – Miễn phí
Ưu điểm của khóa học
- 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.
Nội dung của khóa học
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
Phần 02 – Cài đặt cơ bản
- Cài đặt cơ bản để bắt đầu học hiệu ứng
- Tích hợp thư viện bootstrap và fontawesome
Phần 03 – Cơ bản về keyframes và Timeline
- Chuyển động với keyframes
- Lý thuyết về Timeline
Phần 04 – Nâng cao về chuyển động sử dụng Timeline
- Thực hành về Timeline
- Xử lý thời gian trong TimeLine theo kiểu relative
- Xử lý thời gian trong TimeLine theo kiểu absolute
- Sử dụng tham số chuyển động bằng thuộc tính CSS
- Gia tốc, độ trễ, và thời lượng của chuyển động
- Triển khai nhiều chuyển động trong một dòng
- 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
- 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
- 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
- Chuyển động sử dụng tham số from – to
Phần 08 – Sử dụng Charming JS
- Xử lý text chi tiết bằng ‘charming’
- Sửa lỗi khoảng trắng khi sử dụng charming bằng white-space
- Xử lý hiệu ứng di chuột với anime và charming
Phần 09 – Kết hợp JavaScript và illustrator
- Vẽ bằng javascript SVG
- Vẽ hình bằng illustrator để làm chuyển động
- Hiểu nguồn gốc và nguyên lý vẽ chuyển động bằng javascript
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
- Các bước biến hình đã thiết kế thành chuyển động
- Vẽ chữ, vẽ khung và làm chuyển động với Javascript
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
- Làm chuyển động với khối HTML theo hình đã vẽ
- Áp dụng qui trình làm chuyển động
- Tạo layer mới trên HTML có sẵn
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
- Chuyển động Timeline bằng javascript
- Sửa lỗi chuyển động cách 1
- Sửa lỗi chuyển động cách 2
Phần 13 – Sử dụng Scroll Monitor
- Project số 2 phần HTML CSS
- Sử dụng thư viện scroll Monitor
Phần 14 – Project số 2 phần vẽ illustrator
- Vẽ hình chuyển động trên phần mềm Illustrator
- Xử lý CSS cho phần hình thành một layer trên web
Phần 15 – Hoàn thiện hiệu ứng Project số 2
- Viết javascript xử lý phần hiệu ứng
- Kết hợp hiệu ứng scrollMonitor và anime
- Thực hành bài 3 chuyển động vẽ – phần HTML và CSS
- Thực hành bài 3 chuyển động vẽ – phần JS
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
- Thực hành hiệu ứng biến đổi
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
- Phần CSS cho layer số 1
- Xử lý phần layer số 2
- Xử lý javascript cách 1
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
- Hướng dẫn hiệu ứng số 2
- Hướng dẫn hiệu ứng số 3 và 4
Phần 19 – Giới thiệu hiệu ứng mặt nạ
- Giới thiệu hiệu ứng mặt nạ
- Phân tích chuyển động và xử lý HTML-CSS
- Thực hành bài tập đơn giản để hiểu bản chất của hiệu ứng
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
- Bốn hàm sử dụng để tạo HTML và gắn nội dung HTML
- Cách bọc một thẻ HTML trong một thẻ HTML khác
- Cách 2 dùng để gói HTML bằng javascript
- Thực hành 6 hàm javascript đã học
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
- Đóng gói code sử dụng function
- Hoàn chỉnh phần plugin hiệu ứng
Phần 22 – Hoàn thiện hiệu ứng
- Tích hợp scroll Monitor
- Viết function hoàn thiện scroll Monitor
Giới thiệu giảng viên
Giảng viên: Nguyễn Đức Việt
