Hệ thống thiết kế với figma
kindtiger
Thông qua bài giảng này, hãy xây dựng một hệ thống thiết kế và cảm nhận sức mạnh tổng hợp bùng nổ trong công việc thiết kế của bạn.
초급
Figma, Figma Tokens, Design System
BEST
Hướng dẫn GSAP dành cho hoạt hình trên web Phần 01
GSAP sẽ đưa bạn tiến một bước gần hơn tới việc phát triển web tương tác và quan điểm của bạn về hoạt ảnh sẽ thay đổi.
Đánh giá từ những học viên đầu tiên
Bạn sẽ nhận được điều này sau khi học.
Cách sử dụng GSAP
Hiểu hoạt hình
Hiểu về Web
Cấu trúc HTML
Plugin GSAP
GSAP đã nắm được cốt lõi!
Web tương tác, dễ dàng và thuận tiện hơn nhiều 🌠
Có hình ảnh động thú vị nào trên web không?
Bắt đầu với JavaScript GSAP
Đây là trang mã hóa bản sao Bridge được tạo bằng GSAP. (Liên kết)
Bạn có hứng thú với web tương tác không? Bạn có muốn tạo ra những hình ảnh động web ấn tượng bằng JavaScript không? Bạn có đam mê cả thiết kế và phát triển không? GSAP chính là nền tảng đột phá dành cho bạn.
GSAP, một thư viện hoạt hình JavaScript
GSAP, do GreenSock tạo ra, là một nền tảng hoạt hình cho phép các nhà phát triển front-end, nhà thiết kế UI và những người khác dễ dàng và thuận tiện tạo hoạt hình bằng JavaScript.
✅ Nếu bạn quan tâm đến web tương tác, OK!
✅ Bất kỳ ai biết HTML, CSS và JavaScript!
Tuy nhiên... mặc dù GSAP có sức hấp dẫn lớn nhưng thực sự không dễ để quyết định sử dụng nó.
Nguyên nhân là do khó tìm được tài liệu hoặc tài liệu học tập tiếng Hàn phù hợp.
Nhưng đồng thời, GSAP cung cấp nhiều chức năng khác nhau để thuận tiện cho người dùng.
Do đó, nếu bạn học đúng các chức năng cốt lõi, bất kỳ ai cũng có thể dễ dàng sử dụng nó.
Tôi hy vọng khóa học này sẽ giúp nhiều người yêu thích GSAP và phát triển web tương tác!
Cách dễ nhất và thú vị nhất để học
Hướng dẫn GSAP từ A đến Z
Xây dựng một nền tảng vững chắc
Để hiểu rõ hơn các tính năng cốt lõi
Tôi sẽ giải thích từng phần một.
(Tween, Dòng thời gian, Khung hình chính...)
Thực hành với sự tự tin
Sau bài giảng, bạn có thể thực hành
Cung cấp môi trường và thử thách.
(Tài liệu môi trường Notion và tài liệu Timeline)
Ngay cả người mới bắt đầu cũng có thể làm được mà không cần lo lắng
Ngay cả khi bạn chỉ biết những kiến thức cơ bản về HTML/CSS + JS
Bạn có thể học đủ rồi.
(Sẽ tốt hơn nữa nếu bạn biết sâu về CSS và JS!)
💡 Sau khi học GSAP, góc nhìn của bạn về hoạt hình sẽ thay đổi!
Bây giờ, bạn sẽ thấy các nguyên tắc hoạt hình trên web, thứ mà trước đây bạn chỉ thấy và đánh giá cao bằng một câu đơn giản "Ồ, đẹp quá ". Sau khi tham gia khóa học này, bạn sẽ có thể dự đoán chính xác phương pháp và thuộc tính nào được sử dụng, thậm chí tự mình triển khai chúng, ngay cả khi xem cùng một hoạt hình.
Chương trình giảng dạy
Hãy xem thử nhé.
GSAP là gì?
GSAP là một nền tảng hoạt ảnh được GreenSock xây dựng, cho phép bạn tạo hiệu ứng động cho bất kỳ thành phần nào có thể điều khiển bằng JavaScript (thuộc tính CSS, SVG, React, Canvas, Normal Object, v.v.). Nền tảng này cũng hỗ trợ khả năng tương thích đa trình duyệt trên nhiều trình duyệt và nhanh hơn jQuery tới 20 lần.
Hiểu về GSAP Core
Tìm hiểu về các thuộc tính và phương thức của đối tượng GSAP bằng cách trực tiếp kiểm tra tài liệu chính thức của GreenSock.
Hiểu về Tween
Tìm hiểu các nguyên tắc hoạt hình cơ bản và tạo hoạt hình đơn giản bằng Tween.
Hiểu về Dòng thời gian
Tìm hiểu cách kiểm soát và điều chỉnh dòng thời gian trong hoạt hình của bạn bằng cách sử dụng dòng thời gian.
Kết quả cuối cùng
Tạo phần giới thiệu trang web động của riêng bạn.
💾 Hướng dẫn về Môi trường Khóa học và Tài liệu Học tập
- Khóa học sử dụng CodePen , một trình soạn thảo mã trực tuyến và có thể sử dụng trên cả Windows và macOS.
- Tài liệu học tập được cung cấp dưới dạng tài liệu Notion (Phần 0 - Ghi chú bài học về cấu hình môi trường).
- Bạn nên biết HTML, CSS và JavaScript cơ bản .
Hỏi & Đáp 💬
H. Tại sao tôi nên học GSAP?
Đối với các nhà phát triển web, nơi năng suất là tối quan trọng, việc triển khai hoạt ảnh chỉ bằng JavaScript là không hợp lý và không cần thiết. Chẳng phải sẽ tiện lợi hơn nếu sử dụng một công cụ được thiết kế tốt sao? Giống như dùng búa thay vì tay để đóng đinh vậy.
H. Lợi ích của việc học GSAP là gì?
Bạn sẽ có khả năng phân tích hoạt ảnh và dễ dàng kết hợp chúng vào các dự án của mình.
H. Tôi có thể làm gì nếu học GSAP?
Bạn sẽ không thể tạo nội dung web tương tác ngay sau khi hoàn thành khóa học này. Tuy nhiên, vì đây là khóa học xây dựng nền tảng vững chắc, nên sẽ rất hữu ích nếu bạn học với tâm thế củng cố kiến thức nền tảng :)
H. Tôi có cần chuẩn bị gì trước khi tham dự buổi thuyết trình không?
Bạn nên có kiến thức nền tảng về HTML, CSS và JavaScript. Mặc dù bạn có thể theo dõi mà không cần nhiều kiến thức, nhưng việc hiểu rõ tài liệu sẽ giúp bạn mở rộng đáng kể kiến thức.
H. Nội dung bài học được trình bày ở mức độ nào?
Phần 1 là khóa học GSAP cơ bản. Khóa học này tập trung vào ngữ pháp và các hàm GSAP cơ bản.
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Các nhà phát triển muốn thêm hình ảnh động vào web
Các nhà phát triển muốn sử dụng GSAP đúng cách
Nhà thiết kế tò mò về hoạt hình web
Cần biết trước khi bắt đầu?
HTML
CSS
JavaScript
4,482
Học viên
234
Đánh giá
300
Trả lời
4.9
Xếp hạng
5
Các khóa học
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
Chương trình giảng dạy
Tất cả
27 bài giảng ∙ (3giờ 55phút)
Tài liệu khóa học:
Tài liệu bài giảng
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
64 đánh giá
5.0
64 đánh giá
milkteaĐánh giá 26
∙
Đánh giá trung bình 4.8
5
100% đã tham giaTôi đã hoàn thành khóa học chỉ trong nửa ngày! Tôi đã học GSAP trước đó một chút nên tôi biết một chút ngữ pháp cơ bản. Tôi cũng đã thử một dự án đơn giản. Đó là lý do tại sao tôi nghĩ rằng sự tiến bộ đã nhanh chóng. Trước thầy Beom, chưa có giáo viên nào cung cấp bài giảng trực tuyến về GSAP bằng tiếng mẹ đẻ của họ. Vì tôi đã nghe nó với sự hiểu biết sơ bộ về nó trên Udemy nên tôi nghĩ lần này tôi đã hiểu được rất nhiều khái niệm mà tôi chưa hiểu. Hãy để tôi để lại phản hồi trung thực của tôi Phần 1 là một bài giảng thực sự cơ bản! Vì nó tập trung vào ngữ pháp và khái niệm Không có nhiều dự án đồ chơi chuyên sâu liên quan đến vấn đề này. Tuy nhiên, bạn có thể tạo ra vô số ví dụ dựa trên ngữ pháp bạn đã học ở Phần 1. (Giống như bạn có thể tạo nhiều ví dụ khác nhau bằng Pure CSS, bạn cũng có thể tạo chúng bằng GSAP.) Lý do tôi nói với bạn điều này là vì hơi thất vọng khi có ít ví dụ. Nếu bạn cảm thấy nó quá dễ vì nó chỉ dạy ngữ pháp thì tôi khuyên bạn nên tham khảo nó. Vì tôi đã biết ngữ pháp cơ bản rồi Tôi đang chờ đợi những bài giảng chuyên sâu hơn về Toy Project. Tuy nhiên, lý do tôi mua khóa học này là vì đối với tôi nó giống như một cuốn từ điển ngôn ngữ bản địa GSAP. Tôi mua nó để có thể lấy ra bất cứ khi nào tôi quên ngữ pháp hoặc cách sử dụng một phương pháp nào đó. Mình thấy chóng mặt quá nên các bạn hãy upload hết Part 4 càng sớm càng tốt nhé.
- motep1326
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
19% đã tham giaWow, đây thực sự là bài giảng tôi đang tìm kiếm... Chỉ có các bài giảng về JavaScript cơ bản trên thị trường và tôi không thể tìm thấy bất kỳ bài giảng gsap nào ngoài các bài hướng dẫn được phát hành trong gsap, nhưng đây thực sự là một bài giảng tuyệt vời. Tôi đang tìm kiếm một thư viện hoạt hình có thể tạo đầu ra trong thực tế và điều này thực sự tốt. Cảm ơn bạn rất nhiều vì đã cung cấp bài giảng. Cảm ơn bạn rất nhiều, vui lòng đảm bảo phát hành bài giảng tiếp theo. Thầy sẽ được ban phúc đấy haha
- hjux
Đánh giá 21
∙
Đánh giá trung bình 5.0
- euflynn
Đánh giá 4
∙
Đánh giá trung bình 5.0
5
100% đã tham giaMình thường xuyên có các dự án tương tác nên mình đã tìm kiếm trên Google, xem code trên các blog liên quan và thử sử dụng nhưng lại thiếu rất nhiều thông tin cơ bản😂 Nó được tổ chức dưới dạng tài liệu Notion nên rất dễ hiểu bằng trực quan👍 Về phản hồi, chất lượng giảng dạy rất tốt. Nó cung cấp giải thích chi tiết và nắm bắt trước mọi vấn đề. Một điều hơi thất vọng là sẽ tốt hơn nếu bạn thêm một vài ví dụ nữa. Tôi muốn kiểm tra xem liệu có thể áp dụng nó theo cách này với nhiều ví dụ khác nhau hay không. Sẽ mất rất nhiều thời gian để tạo ra một bài giảng hay, nhưng ngay cả khi nguồn ví dụ không phải là bài giảng, tôi vẫn muốn xem lại nội dung bài giảng và xem các nguồn khác nhau của người hướng dẫn bằng cách cung cấp liên kết tới Code Fan. có thể tìm kiếm trực tiếp theo từ khóa trên Code Fan nhưng nó sẽ hiện ra nhưng chỉ có bài giảng thôi. Rất khó để tìm được nguồn sử dụng nó. Đó là một bài giảng thực sự hữu ích!
- sun5322
Đánh giá 5
∙
Đánh giá trung bình 4.4
5
100% đã tham giaTrong khi làm việc, tôi phát hiện ra gsap trong mã của một trang web khác và quyết định tham gia lớp học vì tôi muốn học nó! Tôi ngơ ngác khi nhìn vào trang web tiếng Anh, nhưng tôi không thể tin được lại có một bài giảng như thế này đã dạy tôi từ những điều cơ bản! Nó có rất nhiều tính năng tuyệt vời, đa dạng và thú vị đến nỗi tôi tự hỏi liệu gsap có phải là tương lai của hoạt hình hay không! Tôi thực sự mong chờ phần tiếp theo~
Ưu đãi có thời hạn, kết thúc sau 8 ngày ngày
24 ₫
29%
924.174 ₫
Khóa học khác của kindtiger
Hãy khám phá các khóa học khác của giảng viên!
Khóa học tương tự
Khám phá các khóa học khác trong cùng lĩnh vực!
![[Giới thiệu về Phát triển Web] Tự phát triển HTML và CSS với Carrot Market강의 썸네일](https://cdn.inflearn.com/public/courses/329537/cover/e58304bd-ac81-4ec4-88c8-479cde58188a/329537-eng.png?f=avif&w=420)
![Bootcamp CSS3 tương tác web hiện đại [Phiên bản đầy đủ]강의 썸네일](https://cdn.inflearn.com/public/courses/334857/cover/4ccc6c75-74aa-4aba-b3d9-8aabe36e9452/334857.jpg?f=avif&w=420)
![Chức năng phát triển thiết kế web [2025] Toàn bộ thực hành (có thể hỏi qua KakaoTalk)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[Chân lợn ảo] Từ thiết kế đến viết mã강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
