Khóa học Lập trình hiệu ứng nâng cao với Javascript và SVG – Miễn phí

Khóa học Lập trình hiệu ứng nâng cao với Javascript và SVG – Miễn phí

Xem ngay

Ưu điểm của khóa 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.

Nội dung của khóa học

Phần 1: 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 2: Cơ bản về keyframes và timeline

• Chuyển động với keyframes
• Lý thuyết về Timeline

Phần 3: 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

Phần 4: 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
• Kết hợp truyền tham số với chuyển động

Phần 5: 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

Phần 6: 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 7: 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 8: 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 9: 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 10: 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 11: 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 12: Sử dụng scroll monitor

• Project số 2 phần HTML CSS
• Sử dụng thư viện scroll Monitor

Phần 13: 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 14: 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 15: 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 16: 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 17: 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 18: 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 19: 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 20: 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 21: 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