Hotline: ☎ 0943.113.311
Hotline:

HỌC VIỆN ĐÀO TẠO TRỰC TUYẾN CATIEDU

Tuyển Sinh Trung Cấp - Cao Đẳng - Đại Học Trực Tuyến
Lập trình hiệu ứng nâng cao với Javascript và SVG
Thể loại: Công nghệ thông tin
Số bài học: 65
Thời lượng video:
Cấp độ: Chưa xếp hạng
Sở hữu khóa học trọn đời
Cấp chứng nhận hoàn thành
0 VNĐ
Lập trình hiệu ứng nâng cao với Javascript và SVG
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
play course
Cài đặt cơ bản để bắt đầu học hiệu ứng
9:29 phút
play course
Tích hợp thư viện bootstrap và fontawesome
7:32 phút
Cơ bản về keyframes và Timeline
play course
Chuyển động với keyframes
14:27 phút
play course
Lý thuyết về Timeline
9:52 phút
Nâng cao về chuyển động sử dụng Timeline
play course
Thực hành về TimeLine
15:58 phút
play course
Xử lý thời gian trong TimeLine theo kiểu relative
7:10 phút
play course
Xử lý thời gian trong TimeLine theo kiểu absolute
3:26 phút
play course
Sử dụng tham số chuyển động bằng thuộc tính CSS
5:04 phút
play course
Gia tốc, độ trễ, và thời lượng của chuyển động
4:53 phút
play course
Triển khai nhiều chuyển động trong một dòng
5:51 phút
play course
Hướng của chuyển động
12:14 phút
Cách truyền tham số chuyển động
play course
Truyền tham số chuyển động thông qua HTML thế nào
5:38 phút
play course
Giải thích về việc gửi nhận dữ liệu
8:24 phút
play course
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
play course
Sử dụng Callback trong khi thiết kế chuyển động
9:45 phút
play course
Sử dụng Update, begin, run và complete
4:42 phút
Chuyển động sử dụng tham số from - to
play course
Tóm tắt kiến thức đã học
14:11 phút
play course
Chuyển động sử dụng tham số from- to
6:05 phút
Sử dụng Charming js
play course
Xử lý text chi tiết bằng 'charming'
12:16 phút
play course
Sửa lỗi khoảng trắng khi sử dụng charming bằng white-space
12:26 phút
play course
Xử lý hiệu ứng di chuột với anime và charming
8:30 phút
Kết hợp Javascript và illustrator
play course
Vẽ bằng javascript SVG
9:25 phút
play course
Vẽ hình bằng Illustrator để làm chuyển động
9:57 phút
play course
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
play course
Chuyển động đầu tiên - Phần 1 - vẽ chuyển động bằng Adobe Illustrator
7:42 phút
play course
Các bước biến hình đã thiết kế thành chuyển động
14:30 phút
play course
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
play course
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
play course
Làm chuyển động với khối HTML theo hình đã vẽ
9:03 phút
play course
Áp dụng qui trình làm chuyển động
4:34 phút
play course
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
play course
Vẽ hình chuyển động trên Adobe illustrator
5:50 phút
play course
Chuyển động Timeline bằng javascript
3:50 phút
play course
Sửa lỗi chuyển động cách 1
3:40 phút
play course
Sửa lỗi chuyển động cách 2
3:42 phút
Sử dụng Scroll Monitor
play course
Project số 2 phần HTML CSS
6:46 phút
play course
Sử dụng thư viện scroll Monitor
8:31 phút
Project số 2 phần vẽ Illustrator
play course
Vẽ hình chuyển động trên phần mềm Illustrator
8:09 phút
play course
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
play course
Viết javascript xử lý phần hiệu ứng
7:08 phút
play course
Kết hợp hiệu ứng scrollMonitor và anime
3:17 phút
play course
Thực hành bài 3 chuyển động vẽ - phần HTML và CSS
9:45 phút
play course
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
play course
Hiểu bản chất hiệu ứng biến đổi hình dạng trong Javascript
8:04 phút
play course
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
play course
Phân tích phần cấu trúc của hiệu ứng
2:35 phút
play course
Phần CSS cho layer số 1
5:38 phút
play course
Xử lý phần layer số 2
3:51 phút
play course
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
play course
Hoàn thiện hiệu ứng với cách số 2
15:15 phút
play course
Hướng dẫn hiệu ứng số 2
2:00 phút
play course
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ạ
play course
Giới thiệu hiệu ứng mặt nạ
3:05 phút
play course
Phân tích chuyển động và xử lý HTML-CSS
6:03 phút
play course
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
play course
Đóng gói hiệu ứng ở mức độ đơn giản
8:04 phút
play course
Bốn hàm sử dụng để tạo HTML và gắn nội dung HTML
7:45 phút
play course
Cách bọc một thẻ HTML trong một thẻ HTML khác
5:12 phút
play course
Cách 2 dùng để gói HTML bằng javascript
9:40 phút
play course
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ạ
play course
Đóng gói hiệu ứng - phần HTML
11:14 phút
play course
Đóng gói code sử dụng function
4:39 phút
play course
Hoàn chỉnh phần plugin hiệu ứng
3:20 phút
Hoàn thiện hiệu ứng
play course
Tích hợp scroll Monitor
12:15 phút
play course
Viết function hoàn thiện scroll Monitor
6:26 phút
Lập trình hiệu ứng nâng cao với Javascript và SVG
Thể loại: Công nghệ thông tin
Số bài học: 65
Thời lượng video:
Cấp độ: Chưa xếp hạng
Sở hữu khóa học trọn đời
Cấp chứng nhận hoàn thành
0 VNĐ
zalo-call
1
Bạn cần hỗ trợ?