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
