Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

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.

(5.0) 61 đánh giá

632 học viên

  • kindtiger
프론트엔드
front-end
gsap
애니메이션
Interactive Web
JavaScript
HTML/CSS

Đá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

Windows 10 + Visual Studio Code 2019

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

Xin chào
Đây là

4,375

Học viên

221

Đánh giá

291

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á

  • milktea님의 프로필 이미지
    milktea

    Đánh giá 26

    Đánh giá trung bình 4.8

    5

    100% đã tham gia

    I finished the course in half a day since the lecture was uploaded! I had studied GSAP a little bit before, so I know a little bit about the basic grammar and I had done some simple projects. That's why I think I finished the course quickly. Before Beom, there was no instructor who provided online lectures on GSAP in my native language, so I listened to Udemy and understood it step by step, so I think I understood a lot of the concepts I didn't understand this time. Let me give you my honest feedback. Part 1 is a really basic lecture! Since it focuses on grammar and concepts, there aren't many related in-depth toy projects. However, you can create endless examples based on the grammar you learned in Part 1. (Just like you can create various examples with Pure CSS, you can create them using GSAP.) The reason I'm saying this is because I want to tell you that if you feel a little disappointed because there are few examples, or if you feel that it's too easy because it only teaches grammar, please refer to it. Since I already know the basic grammar, I am waiting for a more in-depth lecture with a larger amount of toy projects. Even so, the reason I bought this lecture is because it feels like a GSAP native language dictionary to me, I bought it to keep it and take it out whenever I forget the grammar or method usage. I feel dizzy, so please upload all of Part 4 as soon as possible. ㅠ

    • motep1326님의 프로필 이미지
      motep1326

      Đánh giá 2

      Đánh giá trung bình 5.0

      5

      19% đã tham gia

      Wow, the lecture I was looking for is here... There are only lectures on vanilla JavaScript on the market, and no GSAP lectures except for the tutorials released within GSAP, but this lecture is really like lightㅜ I was looking for an animation library that can produce output in practice, and it's so goodㅜ Thank you so much for giving me the lecture, and since I'm grateful, please release the next lecture. I hope you'll be blessed, instructorㅎㅎ

      • hjux님의 프로필 이미지
        hjux

        Đánh giá 20

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        As expected, Beom's lectures are trustworthy and listenable👍 This is the best lecture that is a must-have for those interested in interactive web!! I'm looking forward to the next lecture!! Beom, fighting!!🐯

        • euflynn님의 프로필 이미지
          euflynn

          Đánh giá 4

          Đánh giá trung bình 5.0

          5

          100% đã tham gia

          I often have interaction projects, so I searched on Google and used the codes from related blogs, but I missed a lot of the basics. 😂 It's organized as a Notion document, so it's definitely easy to understand visually👍 The feedback is really good. The lecture quality is great. The explanations are detailed and problems are caught in advance. A little disappointing thing is that it would be good if you could add a few more examples. I want to see how it can be applied in this way with various examples. ㅎㅎ When you make a lecture, it takes a lot of time to make a good lecture, but even if it's not a lecture, I want to review the lecture content and see the instructor's various sources by giving a link to Codepan. Of course, you can search for it by keyword on Codepan, but it's hard to find sources created only using lectures. It was a really helpful lecture!

          • sun5322님의 프로필 이미지
            sun5322

            Đánh giá 3

            Đánh giá trung bình 5.0

            5

            100% đã tham gia

            While working, I found gsap in another site's code, and I wanted to study it, so I took the course! I was at a loss when looking at English sites, but there was a course that taught me from the basics like this! It's so great and has so many fun and diverse functions that I think the future of animation is gsap! I'm really looking forward to the next part~

            925.315 ₫

            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!