Sử dụng GSAP ScrollTrigger với pin để bạn hiểu cách hoạt động

Nguồn tài liệu ở đây: https://github.com/dddodddo/basic

Hướng dẫn sử dụng:

Họ đã đưa lên

Giờ muốn chạy web/FlipScroll

Trên trình duyệt https://dddodddo.github.io/basic/web/FlipScroll

Chú ý:

✅ 1. Mục tiêu

🔹 Pin một section (hoặc element) khi scroll tới nó 🔹 Trong thời gian pin, nội dung scroll tiếp nhưng section vẫn giữ cố định

Ví dụ 1:

Ví dụ 2:

Khi bắt đầu đến cuối nó mới hoạt động

Ví dụ 3:

— pinSpacing: false

— pinSpacing: true

Ví dụ 4: Nghiên cứu bài toán dap dụng pin (chưa hiểu rõ ý nghĩa cần xem lại)

index.html

script.js

style.css

Ví dụ 5: Cũng không hiểu rõ ví dụ này

index.html

script.js

style.css

Ví dụ 6:

index.html

script.js

style.css

Ví dụ 6: Cũng không hiểu rõ ví dụ này

index.html

script.js

style.css

Ví dụ 7: Cũng không hiểu rõ ví dụ này

Ví dụ 8: Cũng không hiểu rõ ví dụ này

PreviousSử dụng GSAP Timeline để animate show/hide search box khi click button (ok)Next😊 Đây là giải thích đầy đủ, ngắn gọn và thực tế về các option quan trọng của ScrollTrigger (ok)

Last updated

Was this helpful?