강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Hướng dẫn GSAP dành cho hoạt hình trên web Phần 03

Bông hoa của hoạt hình web, hoạt hình cuộn! Tìm hiểu về ScrollTrigger, một cách sử dụng GSAP mạnh mẽ hơn.

(5.0) 18 đánh giá

231 học viên

  • kindtiger
실습 중심
gsap
웹페이지
스크롤이벤트
scrolltrigger
Interactive Web
JavaScript
Animation

Đá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 ảnh cuộn

  • Sử dụng GSAP

Hoa của hoạt hình GSAP, Scroll Trigger
Được tổ chức hoàn chỉnh từ nguyên tắc đến ứng dụng!

GSAP, một thư viện hoạt hình JavaScript

Hiểu sâu hơn về GreenSockAnimationPlatform (GSAP) và tìm hiểu cách xây dựng và quản lý hoạt ảnh một cách có hệ thống.

✅ Nếu bạn muốn sử dụng GSAP tốt hơn!
Thêm mã, hình ảnh động và tài liệu thực hành!

Hoạt ảnh cuộn GSAP?
Tôi sẽ làm sao để bạn có thể nói rằng, "Chẳng có gì đặc biệt cả!"

“Tôi đã thử dùng ScrollTrigger một cách đại khái, nhưng tôi không biết cách áp dụng nó 😥”

👉 Đừng lo! Tôi sẽ giúp bạn học hiệu ứng cuộn và ScrollTrigger một cách chính xác!

Bạn đã sử dụng GSAP một thời gian, nhưng muốn hiểu sâu hơn và sử dụng hiệu quả hơn? Bạn vẫn cảm thấy choáng ngợp vì thiếu tài liệu hoặc hướng dẫn tiếng Hàn phù hợp? GSAP cho phép bạn thêm nhiều hiệu ứng động chỉ với cú pháp cơ bản, nhưng khi bạn tìm hiểu sâu hơn về các thuộc tính của nó, bạn sẽ có thể xử lý ngày càng nhiều hiệu ứng động.

Bài giảng này là Phần 3 của GSAP, tiếp nối Phần 1Phần 2. Tìm hiểu về hoạt ảnh cuộn, một yếu tố thiết yếu của thiết kế web tương tác , bằng cách chủ động sử dụng các tính năng của GSAP!

Chú ý, những người này!

  • Các nhà phát triển muốn tìm hiểu ScrollTrigger một cách chính xác
  • Các nhà thiết kế tò mò về hoạt ảnh cuộn
  • Các nhà phát triển quan tâm đến hoạt hình web

Tôi sẽ giải quyết vấn đề của bạn.

  • Bạn chỉ mới tạo giao diện người dùng (UI)? Khóa học này sẽ hướng dẫn bạn những kiến thức cơ bản.
  • Đây không phải là bài giảng chỉ giải thích lý thuyết mà cung cấp những lời giải thích sâu sắc và các cấp độ mã có thể áp dụng trực tiếp vào thực hành.
  • Bài giảng trình bày nội dung JavaScript cần thiết cho GSAP.
  • Cung cấp các phần thực hành để thực hành từng phần
  • Một loạt bài giảng liên quan đến Phần 1Phần 2
Tìm hiểu về cú pháp cơ bản và hoạt ảnh của ScrollTrigger.
Tạo hoạt ảnh cho một trang web duy nhất dựa trên lý thuyết cơ bản.
Tìm hiểu cách proxy (bỏ qua) tính năng cuộn mượt mà, một tính năng không thể thiếu của web tương tác, miễn phí.
Tìm hiểu về ScrollTrigger CallBacks để kiểm soát hoạt ảnh chi tiết.
Tìm hiểu cách ngăn cuộn và kiểm soát hoạt ảnh.
Tìm hiểu cách tạo hiệu ứng động cho giao diện người dùng khi cuộn.
Tìm hiểu cách bật/tắt hình ảnh động khi cuộn.
Dựa trên những gì đã học, bạn sẽ tạo ra một hình ảnh động hoàn chỉnh cho trang web.
Tìm hiểu về các hoạt ảnh có thể điều khiển phát lại video dựa trên giá trị cuộn.
Tìm hiểu cách tạo hoạt ảnh văn bản động bằng plugin văn bản và quản lý chúng để có khả năng phản hồi.
Kiểm soát cách vẽ SVG khi cuộn bằng plugin.
Tìm hiểu cách Ứng dụng trang đơn (SPA), một thành phần chính của phát triển web tương tác, hoạt động và cách kết nối ScrollTrigger.
Tìm hiểu cách triển khai bố cục theo chiều ngang và cách tích hợp bố cục này với ScrollTrigger.
Tìm hiểu cách triển khai bố cục có hướng ngang và hướng dọc kết hợp và cách tích hợp ScrollTrigger.
Tìm hiểu cách thiết lập hoạt ảnh có hiệu ứng khác nhau cho các ViewPort khác nhau.
Tìm hiểu về Reduced-motion, tính năng này giúp cải thiện khả năng truy cập và cung cấp môi trường để người dùng có thể bật và tắt hoạt ảnh.

Bạn có thể làm được điều đó sau khi tham gia lớp học!

  • ✅ Bạn sẽ thấy rằng các hình ảnh động bạn thấy trên các trang web khác hoạt động theo cách này .
  • ✅ Bạn sẽ có thể tự mình thực hiện hoạt ảnh mà bạn muốn tạo mà không gặp khó khăn gì.
  • Tài liệu thực hành được cung cấp cho từng phần để bạn có thể áp dụng những gì đã học!

Hỏi & Đáp 💬

H. Tôi có thể làm gì nếu học GSAP ScrollTrigger?

Bạn có thể thoải mái áp dụng hình ảnh động ở bất kỳ đâu trên trang web yêu cầu phải cuộn.

H. Tôi có cần chuẩn bị gì trước khi tham dự buổi thuyết trình không?

Cần có kiến thức cơ bản về JavaScript và trình độ kiến thức tương đương với Phần 1Phần 2 của khóa học.

H. Nội dung bài học được trình bày ở mức độ nào?

Đây không phải là bài giảng chỉ giải thích các chức năng mà là bài giảng tiến triển đến mức bạn có thể hiểu được cốt lõi và áp dụng ngay vào thực tế.

💾 Hướng dẫn về môi trường thực hành và tài liệu học tập

  • Bạn có thể học trên môi trường Windows và macOS.
  • Trong khóa học này, chúng ta sẽ sử dụng Visual Studio Code.
  • Kiến thức tiên quyết là hiểu biết ở cấp độ chương trình giảng dạy về các bài giảng Phần 1Phần 2 trước đó và quen thuộc với JavaScript.
  • Học viên sẽ được cung cấp tài liệu Notion và các file thực hành. Tài liệu học tập chỉ được hiển thị cho học viên đã đăng ký.

Bạn mới biết đến GSAP? Hãy xem lại các bài giảng trước.

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 tìm hiểu GSAP

  • Nhà thiết kế tò mò về hoạt hình web

  • Các nhà phát triển tò mò về hoạt ảnh cuộn

Cần biết trước khi bắt đầu?

  • Hướng dẫn GSAP về Hoạt hình trên web Phần 1

  • Hướng dẫn GSAP về Hoạt hình trên web Phần 2

  • HTML/CSS

  • JavaScript

Xin chào
Đây là

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ả

55 bài giảng ∙ (13giờ 20phú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ả

18 đánh giá

5.0

18 đánh giá

  • taeyoongo007님의 프로필 이미지
    taeyoongo007

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Nó rất nhiều thông tin và thú vị để lắng nghe. Tôi đang nghĩ đến việc xây dựng một danh mục đầu tư để thay đổi công việc. Chúng tôi dự định tạo ra một trang web phổ biến tốt bằng cách sử dụng gsap càng nhiều càng tốt. Tôi dự định tham gia bài giảng SVG vào lần tới. Cảm ơn Nếu bạn dự định dạy React trong tương lai, Bạn cũng có thể chỉ cho tôi cách sử dụng Gsap bằng cách trộn nó với nó. Cảm ơn bạn đã cho thấy nó.

    • bkman10046536님의 프로필 이미지
      bkman10046536

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      1-3 Tất cả đều cứng đầu! Thành thật mà nói, tôi nghĩ bạn là một thiên tài nếu bạn hiểu mọi thứ sau khi nghe nó một lần. Nhưng tôi đã kiên trì làm đến cùng và có thể nhìn thấy được bức tranh toàn cảnh về GSAP! Tôi dự định sử dụng nó bằng cách đọc và thực hành bất cứ khi nào tôi cần trong thực tế! Nỗi sợ thiếu hiểu biết xuất hiện khi tôi lần đầu tiên gặp GSAP đã phần lớn biến mất và tôi hài lòng với bản thân vì có thể sử dụng nó một cách tự nhiên. Cảm ơn bạn!!

      • twkim94님의 프로필 이미지
        twkim94

        Đánh giá 3

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        Tôi đã xem qua Phần 1 đến Phần 3. Tất cả đều có đầy đủ nội dung hữu ích. Chỉ có một vài bài giảng về ScrollTrigger ở Hàn Quốc và nhờ chúng, tôi đã có thể tạo danh mục đầu tư tương tác mà tôi muốn và di chuyển thành công đến nơi tôi muốn! Cảm ơn bạn đã đăng một bài giảng tuyệt vời. Tôi đang mong chờ phần 4 tiếp theo!

        • leekj9510089605님의 프로필 이미지
          leekj9510089605

          Đánh giá 3

          Đánh giá trung bình 5.0

          5

          31% đã tham gia

          • sunburst773181님의 프로필 이미지
            sunburst773181

            Đánh giá 16

            Đánh giá trung bình 5.0

            5

            31% đã tham gia

            Cuối cùng tôi đã được học phần 3. Các khóa học khác chỉ bận rộn theo kịp nên không hiểu rõ khái niệm, nhưng qua lớp học này tôi có thể biết từ cơ bản của ScrollTrigger nên đã hiểu được ý nghĩa và cách sử dụng của từng tùy chọn. Thêm vào đó, tôi cũng có thể học JavaScript nên có vẻ như sẽ có thể nâng cấp kỹ năng theo nhiều cách khác nhau. Tuy nhiên, có vẻ như tôi sẽ phải ôn tập nhiều lần để có thể tự tạo ra được. Cảm ơn!!

            Ưu đãi có thời hạn, kết thúc sau 8 ngày ngày

            2.295.529 ₫

            29%

            3.279.327 ₫

            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!