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

/

Web Development

Xây dựng trang web sáng tạo của bạn: Parallax ScrollTrigger Masterclass

Nhiều trang web sử dụng Parallax ScrollTrigger để đạt được những hiệu ứng thú vị. Hãy sử dụng thư viện này để tạo các trang web sáng tạo và ấn tượng.

(5.0) 3 đánh giá

34 học viên

  • webstoryboy
포트폴리오
gsap
parallax
scrolltrigger
Portfolio
JavaScript

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Hiệu ứng thị sai

  • Javascript cơ bản

  • Hoạt hình GSAP

  • Trình kích hoạt cuộn GSAP

Bạn muốn tạo một trang web tương tác tuyệt vời?
GSAP Parallax ScrollTrigger dễ dàng và tiện lợi!

Hoạt ảnh mượt mà trên web
GSAP Parallax ScrollTrigger

💡 Xem trước hoạt ảnh mẫu >> (nhấp vào)

Xin chào! Đây là Webstoryboy.
Video này giới thiệu về plugin mạnh mẽ của GSAP, Parallax ScrollTrigger . Đây là video dành cho người mới bắt đầu với 15 ví dụ. Video bắt đầu bằng cách giải thích Parallax ScrollTrigger là gì và sau đó giải thích chi tiết cách thức hoạt động của nó.

Và chúng tôi sẽ hướng dẫn một số ví dụ về cách áp dụng hiệu ứng này vào portfolio của bạn . Nhiều trang web đang sử dụng Parallax ScrollTrigger để tạo ra những hiệu ứng ấn tượng.

Tại sao lại sử dụng Parallax ScrollTrigger?

Bạn có thể sử dụng nhiều yếu tố khác nhau như hình ảnh, hình nền và văn bản để di chuyển màn hình hoặc triển khai hoạt ảnh mượt mà .

✅ Dễ sử dụng và cung cấp nhiều tùy chọn tùy chỉnh, rất tiện lợi và hữu ích.

Bạn có thể sử dụng nó để tạo danh mục đầu tư và phát triển trang web sáng tạo và ấn tượng.


Gửi đến những người này
Tôi khuyên bạn nên làm vậy.

Bất kỳ ai quan tâm đến phát triển front-end, bao gồm cả nhà phát triển web

Các nhà phát triển muốn làm cho danh mục đầu tư của mình trở nên năng động và sáng tạo

Các nhà phát triển muốn áp dụng các tính năng ScrollTrigger và Parallax vào các dự án thực tế

Bốn lợi ích chính của khóa học này

  • 1️⃣ Chương trình học được tổ chức một cách có hệ thống để người học có thể tiếp thu nội dung theo trình tự.
  • 2️⃣ Chúng tôi tập trung vào các kỹ thuật thực tế áp dụng cho các dự án phát triển web thực tế.
  • 3️⃣ Trong bài giảng, thay vì tập trung vào nội dung lý thuyết, bạn sẽ học các phương pháp triển khai thông qua thực hành và ví dụ.
  • 4️⃣ Chúng tôi đã đưa ra nhiều ví dụ và trường hợp ứng dụng khác nhau để người học có thể hiểu nội dung theo nhiều cách khác nhau.

Hỏi & Đáp 💬

H. Parallax ScrollTrigger là gì?

Parallax ScrollTrigger là một plugin mạnh mẽ dành cho GreenSock Animation Platform (GSAP). Plugin này sử dụng công nghệ để điều khiển mượt mà chuyển động của các thành phần trên trang web khi chúng cuộn. Nó cho phép bạn di chuyển hoặc tạo hiệu ứng động cho các thành phần như hình ảnh, hình nền và văn bản theo nhiều cách khác nhau dựa trên vị trí cuộn.

H. Tôi có thể đạt được hiệu ứng gì khi sử dụng Parallax ScrollTrigger?

Bạn có thể áp dụng nhiều hiệu ứng khác nhau trên trang web hoặc danh mục đầu tư của mình. Ví dụ: bạn có thể tạo hiệu ứng ba chiều bằng cách di chuyển hình ảnh mượt mà khi cuộn, hoặc làm động văn bản khi nó dần dần xuất hiện hoặc biến mất.

H. GSAP là gì?

GSAP (GreenSock Animation Platform) là một thư viện được sử dụng để triển khai các hiệu ứng hoạt hình phong phú và mạnh mẽ trong phát triển web. GSAP mang lại hiệu suất cao và khả năng tương thích đa trình duyệt, cùng với khả năng kiểm soát hoạt hình tuần tự và tùy chỉnh chi tiết.

H. Cần có kiến thức tiên quyết nào để sử dụng ScrollTrigger của GSAP?

Bạn sẽ cần có hiểu biết cơ bản về HTML, CSS, JavaScript và cách sử dụng GSAP cơ bản.

H. Các ví dụ được đưa ra trong bài giảng thể hiện những loại hiệu ứng nào?

Bài giảng sẽ cho bạn thấy nhiều hiệu ứng khác nhau như hoạt ảnh Ghim, hiệu ứng hình ảnh, hiệu ứng văn bản, hiệu ứng nền, điều chỉnh tỷ lệ, chế độ ngang, chế độ dọc/ngang, v.v.

H. Tôi có thể áp dụng những gì đã học ở lớp vào đâu?

Những gì bạn học được trong khóa học này có thể được áp dụng cho nhiều dự án khác nhau. Cho dù đó là danh mục đầu tư, trang chi tiết hay trang sự kiện, hiệu ứng hoạt hình sẽ nâng cao trải nghiệm người dùng của bạn.

H. Có cần cân nhắc gì khi triển khai trang web bằng Parallax ScrollTrigger không?

Hiệu ứng thị sai có thể tiêu tốn nhiều tài nguyên, vì vậy việc cân nhắc hiệu suất là rất quan trọng. Sử dụng Công cụ dành cho nhà phát triển Chrome để kiểm tra FPS và, nếu cần, tối ưu hóa hoạt ảnh để đảm bảo chuyển động mượt mà của trang web.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Bất cứ ai muốn tạo một danh mục đầu tư năng động

  • Bất kỳ ai muốn tạo hoạt ảnh tương tác

  • Bất kỳ ai muốn tạo trang web ở chế độ ngang hoặc dọc

  • Những người muốn tạo một danh mục đầu tư cho việc làm

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

  • Khái niệm cơ bản về HTML/CSS

  • Khái niệm cơ bản về JavaScript

  • GSAP

  • Kích hoạt cuộn

Xin chào
Đây là

124

Học viên

6

Đánh giá

6

Trả lời

5.0

Xếp hạng

4

Các khóa học

나는 공간을 만드는 것을 좋아한다.
어렸을 때부터 나만의 공간을 만드는 것을 좋아했다. 
내가 만든 공간 속에서 누군가가 영감을 받거나 마음을 움직이게 하는 것이 목표다.
코딩은 이런 매력적인 공간을 만들 수 있는 힘이라 생각한다. 
그 한구석에 나만의 꿈을 담아두고, 개발을 하면 살고 싶다.

Chương trình giảng dạy

Tất cả

15 bài giảng ∙ (4giờ 35phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

3 đánh giá

5.0

3 đánh giá

  • foxball님의 프로필 이미지
    foxball

    Đánh giá 32

    Đánh giá trung bình 4.8

    5

    33% đã tham gia

    좋은강의 감사합니다.

    • 김강연님의 프로필 이미지
      김강연

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      33% đã tham gia

      다음 강의도 기다릴게요!!

      • 웹개바르르님의 프로필 이미지
        웹개바르르

        Đánh giá 16

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        gsap scrollTrigger 국내강의가 없어서 거의 나오자마자 구매 했습니다. 유튜브 외국강사분들꺼 크롬확장프로그램으로 자막 띄워가지고 공부했었는데 자막도 완벽하지않아서 추측하면서 공부해서 좀 부족했었거든요 역시 국내강의가 알아듣기쉽고 좋네요 감사합니다 다음 gsap 이용해서 홈페이지 만드는 강의 나오면 그것도 구매해서 볼게요

        • webstoryboy
          Giảng viên

          감사합니다. GSAP를 이용한 사이트를 만들기 준비해야겠네요 🥳

      925.315 ₫

      Khóa học khác của webstoryboy

      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!