디자인 시스템 with 피그마
범쌤
이 강의를 통해 디자인 시스템을 구축하고 내 디자인 작업물이 가지는 폭발적인 시너지를 느껴보세요.
Basic
Figma, Figma Tokens, 디자인 시스템
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
Dịch cái này sang tiếng Việt
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,418
Học viên
225
Đánh giá
292
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ả
61 đánh giá
5.0
61 đánh giá
밀크티Đánh giá 26
∙
Đánh giá trung bình 4.8
5
100% đã tham gia강의 올라온 지 반나절만에 완강했습니다! 저는 기존에 GSAP에 대해서 조금 공부를 했던 사람이라 기본 문법은 조금 알고 있고 간단한 프로젝트도 해봤었어요. 그래서 완강이 빨랐던 것 같습니다. 범쌤 이전에는 GSAP에 대한 온라인 강의를 모국어로 제공하는 강사가 없었기 때문에 유데미로 알음알음 대충 이해하며 들었던지라, 이번에 이해하지 못했던 개념을 많이 이해한 것 같습니다. 솔직한 저의 피드백을 남기자면 파트1 강의는 정말 기초 강의입니다! 문법과 개념 위주이기 때문에 관련한 심화 토이프로젝트는 많지 않습니다. 하지만 파트1에서 배운 문법을 토대로 무궁무진한 예제들을 만들 수 있습니다. (Pure CSS로 다양한 예제를 만들 수 있는 것처럼 GSAP를 이용하여 만들수 있을거에요.) 제가 왜 이런 이야기를 하느냐면, 혹시나 예제가 적어서 조금 아쉽다거나, 문법만 알려주니 너무 쉽다고 느껴지실 분들은 참고하시라고 말씀드리고 싶어서입니다. 저는 이미 기본 문법을 알고 있기때문에 저는 토이프로젝트의 양이 좀 더 많은 심화 강의를 기다리고 있습니다. 그럼에도 저는 이 강의를 산 이유는 제게는 이 강의가 GSAP 모국어 사전같은 느낌으로 소장하면서 문법이나 메소드 사용법을 까먹을 때마다 꺼내보려고 샀습니다. 현기증 나니까 파트4까지 하루라도 빨리 전부 올려주세요 ㅠ
- motep
Đánh giá 2
∙
Đánh giá trung bình 5.0
- Hyungjin
Đánh giá 20
∙
Đánh giá trung bình 5.0
- 플린
Đánh giá 4
∙
Đánh giá trung bình 5.0
5
100% đã tham gia종종 인터렉션 프로젝트가 있어서 구글에 검색하고 관련 블로그에 있는 코드보고 가져와서 사용해봤는데 제가 기초적인 내용을 많이 놓치고 있었네요😂 노션문서로 정리되어 있어서 확실히 시각적으로 이해하기 좋습니다👍 피드백은 강의컬리티는 너무 좋습니다 설명도 자세히 알려주시고 문제가 생길점도 미리 캐치해주십니다. 살짝 아쉬운점은 예제를 몇개 더 추가해주시면 좋을 것 같습니다 다양한 예제로 이런식으로 응용이 가능하구나 확인하고 싶거든요ㅎㅎ 강의를 만드실때 좋은강의를 만드시느라 시간이 많이 걸리겠지만 예제소스는 강의가 아니더라도 코드팬으로 링크를 주셔서 강의내용 복습겸 강사님의 여러 소스를 보고 싶습니다 물론 코드팬에 직접 키워드로 검색해도 나오긴하는데 강의만 활용해서 만든 소스를 찾기 어렵네요 정말 도움되는 강의였습니다!
- sun
Đánh giá 5
∙
Đánh giá trung bình 4.4
925.210 ₫
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!
![모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]Course Thumbnail](https://cdn.inflearn.com/public/courses/334857/cover/4ccc6c75-74aa-4aba-b3d9-8aabe36e9452/334857.jpg?f=avif&w=420)
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드Course Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
