Tổng cộng:
[masp]fedu-08[/masp]
[giaban]0đ[/giaban]
[tinhtrang]Còn hàng[/tinhtrang]
[chitiet]Thiết kế hiệu ứng bằng Javascript và illustratorGiới thiệu khóa học- 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.- 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.Nội dung khóa họcPhầ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 (04:40)Phần 02 - Cài đặt cơ bản 002 - Cài đặt cơ bản để bắt đầu học hiệu ứng (09:33) 003 - Tích hợp thư viện bootstrap và fontawesome (07:31)Phần 03 - Cơ bản về keyframes và Timeline 004 - Chuyển động với keyframes (14:27) 005 - Lý thuyết về Timeline (09:51)Phần 04 - Nâng cao về chuyển động sử dụng Timeline 006 - Thực hành về Timeline (15:58) 007 - Xử lý thời gian trong TimeLine theo kiểu relative (07:10) 008 - Xử lý thời gian trong TimeLine theo kiểu absolute (03:25) 009 - Sử dụng tham số chuyển động bằng thuộc tính CSS (05:04) 010 - Gia tốc, độ trễ, và thời lượng của chuyển động (04:53) 011 - Triển khai nhiều chuyển động trong một dòng (05:50) 012 - Hướng của chuyển động (12:14)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 (05:38) 014 - Giải thích về việc gửi nhận dữ liệu (08:24) 015 - Kết hợp truyền tham số với chuyển động (07:28)Phần 06 - Sử dụng callback, run, complete trong Timeline 016 - Sử dụng Callback trong khi thiết kế chuyển động (09:44) 017 - Sử dụng Update, begin, run và complete (04:41)Phần 07 - Chuyển động sử dụng tham số from - to 018 - Tóm tắt kiến thức đã học (14:11) 019 - Chuyển động sử dụng tham số from - to (06:05)Phần 08 - Sử dụng Charming JS 020 - Xử lý text chi tiết bằng 'charming' (12:16) 021 - Sửa lỗi khoảng trắng khi sử dụng charming bằng white-space (12:26) 022 - Xử lý hiệu ứng di chuột với anime và charming (08:29)Phần 09 - Kết hợp JavaScript và illustrator 023 - Vẽ bằng javascript SVG (09:24) 024 - Vẽ hình bằng illustrator để làm chuyển động (11:38) 025 - Hiểu nguồn gốc và nguyên lý vẽ chuyển động bằng javascript (15:51)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 (07:41) 027 - Các bước biến hình đã thiết kế thành chuyển động (14:30) 028 - Vẽ chữ, vẽ khung và làm chuyển động với Javascript (07:47)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 (05:12) 030 - Làm chuyển động với khối HTML theo hình đã vẽ (09:02) 031 - Áp dụng qui trình làm chuyển động (04:34) 032 - Tạo layer mới trên HTML có sẵn (02:34)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 (05:50) 034 - Chuyển động Timeline bằng javascript (03:50) 035 - Sửa lỗi chuyển động cách 1 (03:39) 036 - Sửa lỗi chuyển động cách 2 (03:42)Phần 13 - Sử dụng Scroll Monitor 037 - Project số 2 phần HTML CSS (06:48) 038 - Sử dụng thư viện scroll Monitor (08:32)Phần 14 - Project số 2 phần vẽ illustrator 039 - Vẽ hình chuyển động trên phần mềm Illustrator (08:08) 040 - Xử lý CSS cho phần hình thành một layer trên web (03:42)Phần 15 - Hoàn thiện hiệu ứng Project số 2 041 - Viết javascript xử lý phần hiệu ứng (07:08) 042 - Kết hợp hiệu ứng scrollMonitor và anime (03:16) 043 - Thực hành bài 3 chuyển động vẽ - phần HTML và CSS (09:45) 044 - Thực hành bài 3 chuyển động vẽ - phần JS (07:30)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 (08:03) 046 - Thực hành hiệu ứng biến đổi (06:10)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 (02:34) 048 - Phần CSS cho layer số 1 (05:38) 049 - Xử lý phần layer số 2 (03:51) 050 - Xử lý javascript cách 1 (03:34)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 (15:15) 052 - Hướng dẫn hiệu ứng số 2 (01:59) 053 - Hướng dẫn hiệu ứng số 3 và 4 (02:27)Phần 19 - Giới thiệu hiệu ứng mặt nạ 054 - Giới thiệu hiệu ứng mặt nạ (03:04) 055 - Phân tích chuyển động và xử lý HTML-CSS (06:02) 056 - 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ầ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 (08:03) 058 - Bốn hàm sử dụng để tạo HTML và gắn nội dung HTML (07:44) 059 - Cách bọc một thẻ HTML trong một thẻ HTML khác (05:12) 060 - Cách 2 dùng để gói HTML bằng javascript (09:40) 061 - Thực hành 6 hàm javascript đã học (06:14)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 (11:14) 063 - Đóng gói code sử dụng function (04:39) 064 - Hoàn chỉnh phần plugin hiệu ứng (03:19)Phần 22 - Hoàn thiện hiệu ứng 065 - Tích hợp scroll Monitor (12:14) 066 - Viết function hoàn thiện scroll Monitor (06:26)Giảng Viên: Thầy Nguyễn Đức ViệtGiảng viên với 12 năm trong nghề thiết kế, lập trình web. Anh đã và đang giảng dạy, đào tạo cho khoảng hơn 10.000+ học viên thiết kế, lập trình web tại Việt Nam. Tốt nghiệp khoa CNTT, Đại học bách khoa Hà Nội. Từng làm việc trong nhiều dự án lớn thuộc tập đoàn lớn, anh đã và đang tham gia rât nhiều dự án Freelancer về thiết kế đồ họa nên kinh nghiệm thực tế dồi dào, mong muốn đem những kinh nghiệm này chia sẻ cho tất cả mọi người, giúp các bạn có được những hành trang quý báu trên con đường sự nghiệp.Từng du học nghành thiết kế đồ họa đa phương tiện – tại tập đoàn Aptech Limited – Bangalore Ấn Độ theo chương trình giảng viên tài năng.Tốt nghiệp khoa CNTT, Đại học bách khoa Hà Nội.
[giaban]0đ[/giaban]
[tinhtrang]Còn hàng[/tinhtrang]
[chitiet]
Thiết kế hiệu ứng bằng Javascript và illustrator
Giới thiệu khóa học
- 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.
- 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.
Nội dung khóa 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 (04:40)
Phần 02 - Cài đặt cơ bản
002 - Cài đặt cơ bản để bắt đầu học hiệu ứng (09:33)
003 - Tích hợp thư viện bootstrap và fontawesome (07:31)
Phần 03 - Cơ bản về keyframes và Timeline
004 - Chuyển động với keyframes (14:27)
005 - Lý thuyết về Timeline (09:51)
Phần 04 - Nâng cao về chuyển động sử dụng Timeline
006 - Thực hành về Timeline (15:58)
007 - Xử lý thời gian trong TimeLine theo kiểu relative (07:10)
008 - Xử lý thời gian trong TimeLine theo kiểu absolute (03:25)
009 - Sử dụng tham số chuyển động bằng thuộc tính CSS (05:04)
010 - Gia tốc, độ trễ, và thời lượng của chuyển động (04:53)
011 - Triển khai nhiều chuyển động trong một dòng (05:50)
012 - Hướng của chuyển động (12:14)
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 (05:38)
014 - Giải thích về việc gửi nhận dữ liệu (08:24)
015 - Kết hợp truyền tham số với chuyển động (07:28)
Phần 06 - Sử dụng callback, run, complete trong Timeline
016 - Sử dụng Callback trong khi thiết kế chuyển động (09:44)
017 - Sử dụng Update, begin, run và complete (04:41)
Phần 07 - Chuyển động sử dụng tham số from - to
018 - Tóm tắt kiến thức đã học (14:11)
019 - Chuyển động sử dụng tham số from - to (06:05)
Phần 08 - Sử dụng Charming JS
020 - Xử lý text chi tiết bằng 'charming' (12:16)
021 - Sửa lỗi khoảng trắng khi sử dụng charming bằng white-space (12:26)
022 - Xử lý hiệu ứng di chuột với anime và charming (08:29)
Phần 09 - Kết hợp JavaScript và illustrator
023 - Vẽ bằng javascript SVG (09:24)
024 - Vẽ hình bằng illustrator để làm chuyển động (11:38)
025 - Hiểu nguồn gốc và nguyên lý vẽ chuyển động bằng javascript (15:51)
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 (07:41)
027 - Các bước biến hình đã thiết kế thành chuyển động (14:30)
028 - Vẽ chữ, vẽ khung và làm chuyển động với Javascript (07:47)
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 (05:12)
030 - Làm chuyển động với khối HTML theo hình đã vẽ (09:02)
031 - Áp dụng qui trình làm chuyển động (04:34)
032 - Tạo layer mới trên HTML có sẵn (02:34)
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 (05:50)
034 - Chuyển động Timeline bằng javascript (03:50)
035 - Sửa lỗi chuyển động cách 1 (03:39)
036 - Sửa lỗi chuyển động cách 2 (03:42)
Phần 13 - Sử dụng Scroll Monitor
037 - Project số 2 phần HTML CSS (06:48)
038 - Sử dụng thư viện scroll Monitor (08:32)
Phần 14 - Project số 2 phần vẽ illustrator
039 - Vẽ hình chuyển động trên phần mềm Illustrator (08:08)
040 - Xử lý CSS cho phần hình thành một layer trên web (03:42)
Phần 15 - Hoàn thiện hiệu ứng Project số 2
041 - Viết javascript xử lý phần hiệu ứng (07:08)
042 - Kết hợp hiệu ứng scrollMonitor và anime (03:16)
043 - Thực hành bài 3 chuyển động vẽ - phần HTML và CSS (09:45)
044 - Thực hành bài 3 chuyển động vẽ - phần JS (07:30)
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 (08:03)
046 - Thực hành hiệu ứng biến đổi (06:10)
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 (02:34)
048 - Phần CSS cho layer số 1 (05:38)
049 - Xử lý phần layer số 2 (03:51)
050 - Xử lý javascript cách 1 (03:34)
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 (15:15)
052 - Hướng dẫn hiệu ứng số 2 (01:59)
053 - Hướng dẫn hiệu ứng số 3 và 4 (02:27)
Phần 19 - Giới thiệu hiệu ứng mặt nạ
054 - Giới thiệu hiệu ứng mặt nạ (03:04)
055 - Phân tích chuyển động và xử lý HTML-CSS (06:02)
056 - 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ầ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 (08:03)
058 - Bốn hàm sử dụng để tạo HTML và gắn nội dung HTML (07:44)
059 - Cách bọc một thẻ HTML trong một thẻ HTML khác (05:12)
060 - Cách 2 dùng để gói HTML bằng javascript (09:40)
061 - Thực hành 6 hàm javascript đã học (06:14)
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 (11:14)
063 - Đóng gói code sử dụng function (04:39)
064 - Hoàn chỉnh phần plugin hiệu ứng (03:19)
Phần 22 - Hoàn thiện hiệu ứng
065 - Tích hợp scroll Monitor (12:14)
066 - Viết function hoàn thiện scroll Monitor (06:26)
Giảng Viên: Thầy Nguyễn Đức Việt
Giảng viên với 12 năm trong nghề thiết kế, lập trình web. Anh đã và đang giảng dạy, đào tạo cho khoảng hơn 10.000+ học viên thiết kế, lập trình web tại Việt Nam. Tốt nghiệp khoa CNTT, Đại học bách khoa Hà Nội. Từng làm việc trong nhiều dự án lớn thuộc tập đoàn lớn, anh đã và đang tham gia rât nhiều dự án Freelancer về thiết kế đồ họa nên kinh nghiệm thực tế dồi dào, mong muốn đem những kinh nghiệm này chia sẻ cho tất cả mọi người, giúp các bạn có được những hành trang quý báu trên con đường sự nghiệp.
Từng du học nghành thiết kế đồ họa đa phương tiện – tại tập đoàn Aptech Limited – Bangalore Ấn Độ theo chương trình giảng viên tài năng.
Tốt nghiệp khoa CNTT, Đại học bách khoa Hà Nội.
[/chitiet]
Thiết kế hiệu ứng bằng Javascript và illustrator
[/chitiet]
 |
| Thiết kế hiệu ứng bằng Javascript và illustrator |
