100.28.132.102
Lập Trình - CNTT

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

khoá học Lập trình hiệu ứng nâng cao với Javascript và SVG

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

Ư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

gianng vien Nguyễn Đức Việt

Đánh giá của học viên tại Lập trình hiệu ứng nâng cao với Javascript và SVG

đánh giá học viên tại khoá học Lập trình hiệu ứng nâng cao với Javascript và SVG

Mời bạn cùng Khóa Học Free download/ xem/ tải Khoá học Lập trình hiệu ứng nâng cao với Javascript và SVG – Miễn phí – Link Google Drive

Related Articles

Back to top button