Thiết kế hiệu ứng bằng Javascript và illustrator

Giới thiệu khóa học
Bạn đã biết đến Javascript và illustrator? Bạn thành thạo trong việc sử dụng hai công cụ trên để tạo ra sản phẩn thiết kế? Tuy nhiên bạn chưa biết cách kết hợp hai phần mềm đó để tự mình tạo ra những sản phẩm ấn tượng, đẹp mắt, hợp logic.
Hãy tham khảo khoá học “Thiết kế hiệu ứng bằng Javascript và illustrator” của Fedu. Khoá học mang đến phương pháp và giúp bạn thuần thục trong việc 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.
Điểm nổi bật 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 khoá học
Phần 01 – Giới thiệu khóa học
001 – 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
002 – Cài đặt cơ bản để bắt đầu học hiệu ứng
003 – Tích hợp thư viện bootstrap và fontawesome

Phần 03 – Cơ bản về keyframes và Timeline
004 – Chuyển động với keyframes
005 – Lý thuyết về Timeline

Phần 04 – Nâng cao về chuyển động sử dụng Timeline
006 – Thực hành về Timeline
007 – Xử lý thời gian trong TimeLine theo kiểu relative
008 – Xử lý thời gian trong TimeLine theo kiểu absolute
009 – Sử dụng tham số chuyển động bằng thuộc tính CSS
010 – Gia tốc, độ trễ, và thời lượng của chuyển động
011 – Triển khai nhiều chuyển động trong một dòng
012 – Hướng của chuyển động

Phần 05 – Cách truyền tham số chuyển động
013 – Truyền tham số chuyển động thông qua HTML thế nào
014 – Giải thích về việc gửi nhận dữ liệu
015 – Kết hợp truyền tham số với chuyển động

Phần 06 – Sử dụng callback, run, complete trong Timeline
016 – Sử dụng Callback trong khi thiết kế chuyển động
017 – Sử dụng Update, begin, run và complete

Phần 07 – Chuyển động sử dụng tham số from – to
018 – Tóm tắt kiến thức đã học
019 – Chuyển động sử dụng tham số from – to

Phần 08 – Sử dụng Charming JS
020 – Xử lý text chi tiết bằng ‘charming’
021 – Sửa lỗi khoảng trắng khi sử dụng charming bằng white-space
022 – Xử lý hiệu ứng di chuột với anime và charming

Phần 09 – Kết hợp JavaScript và illustrator
023 – Vẽ bằng javascript SVG
024 – Vẽ hình bằng illustrator để làm chuyển động
025 – 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
026 – Chuyển động đầu tiên – Phần 1 – vẽ chuyển động bằng Adobe Illustrator
027 – Các bước biến hình đã thiết kế thành chuyển động
028 – 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
029 – Làm bài tập chuyển động – phần setup cơ bản và chuẩn bị 2 layer
030 – Làm chuyển động với khối HTML theo hình đã vẽ
031 – Áp dụng qui trình làm chuyển động
032 – 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
033 – Vẽ hình chuyển động trên Adobe illustrator
034 – Chuyển động Timeline bằng javascript
035 – Sửa lỗi chuyển động cách 1
036 – Sửa lỗi chuyển động cách 2

Phần 13 – Sử dụng Scroll Monitor
037 – Project số 2 phần HTML CSS
038 – Sử dụng thư viện scroll Monitor

Phần 14 – Project số 2 phần vẽ illustrator
039 – Vẽ hình chuyển động trên phần mềm Illustrator
040 – 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
041 – Viết javascript xử lý phần hiệu ứng
042 – Kết hợp hiệu ứng scrollMonitor và anime
043 – Thực hành bài 3 chuyển động vẽ – phần HTML và CSS
044 – 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
045 – Hiểu bản chất hiệu ứng biến đổi hình dạng trong Javascript
046 – 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
047 – Phân tích phần cấu trúc của hiệu ứng
048 – Phần CSS cho layer số 1
049 – Xử lý phần layer số 2
050 – 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
051 – Hoàn thiện hiệu ứng với cách số 2
052 – Hướng dẫn hiệu ứng số 2
053 – Hướng dẫn hiệu ứng số 3 và 4

Phần 19 – Giới thiệu hiệu ứng mặt nạ
054 – Giới thiệu hiệu ứng mặt nạ
055 – Phân tích chuyển động và xử lý HTML-CSS
056 – 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
057 – Đóng gói hiệu ứng ở mức độ đơn giản
058 – Bốn hàm sử dụng để tạo HTML và gắn nội dung HTML
059 – Cách bọc một thẻ HTML trong một thẻ HTML khác
060 – Cách 2 dùng để gói HTML bằng javascript
061 – 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ạ
062 – Đóng gói hiệu ứng – phần HTML
063 – Đóng gói code sử dụng function
064 – Hoàn chỉnh phần plugin hiệu ứng

Phần 22 – Hoàn thiện hiệu ứng
065 – Tích hợp scroll Monitor
066 – Viết function hoàn thiện scroll Monitor