這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 發現很多人還只會promise常規用法 在js項目中，promise的使用應該是必不可少的，但我發現在同事和麵試者中，很多中級或以上的前端都還停留在promiseInst.then()、promiseInst.catch()、Promis ...
大家好,我是程式視點的小二哥!今天小二哥帶領大家學習如何使用最少的代碼創建令人嘆為觀止的滾動動畫~
在聊ScrollTrigger插件之前我們先簡單瞭解下GSAP。
GreenSock 動畫平臺 （GSAP） 可為 JavaScript 可以操作的任何內容（CSS 屬性、SVG、React、畫布、通用對象等）動畫化，並解決不同瀏覽器上存在的相容問題，而且比 jQuery快 20 倍。大約1000萬個網站和許多主要品牌都在使用GSAP。
接下來小二哥帶領大家一起學習ScrollTrigger插件的使用。
插件簡介
ScrollTrigger是基於GSAP實現的一款高性能頁面滾動觸發HTML元素動畫的插件。通過ScrollTrigger使用最少的代碼創建令人嘆為觀止的滾動動畫。我們需要知道ScrollTrigger是基於GSAP實現的插件，ScrollTrigger是處理滾動事件的，而真正處理動畫是GSAP，二者組合使用才能實現滾動動畫~
插件特點
- 將任何動畫鏈接到特定元素，以便它僅在視圖中顯示該元素時才執行該動畫。
- 可以在進入/離開定義的區域或將其直接鏈接到滾動欄時在動畫上執行操作（播放、暫停、恢復、重新啟動、反轉、完成、重置）。
- 延遲動畫和滾動條之間的同步。
- 根據速度捕捉動畫中的進度值。
- 嵌入滾動直接觸發到任何 GSAP 動畫（包括時間線）或創建獨立實例，並利用豐富的回調系統做任何您想做的事。
- 高級固定功能可以在某些滾動位置之間鎖定一個元素。
- 靈活定義滾動位置。
- 支持垂直或水平滾動。
- 豐富的回調系統。
- 當視窗調整大小時，自動重新計算位置。
- 在開發過程中啟用視覺標記，以準確查看開始/結束/觸發點的位置。
- 在滾動記錄器處於活動狀態時，如將
active類添加到觸發元素中：toggleClass: "active" - 使用 matchMedia() 標準媒體查詢為各種屏幕尺寸創建不同的設置。
- 自定義滾動觸發器容器，可以定義一個 div 而不一定是瀏覽器視口。
- 高度優化以實現最大性能。
- 插件大約只有6.5kb大小。
安裝
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
ES Modules
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
UMD/CommonJS
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
簡單示例
gsap.to(".box", {
scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
x: 500
});
高級示例
let tl = gsap.timeline({
// 添加到整個時間線
scrollTrigger: {
trigger: ".container",
pin: true, // 在執行時固定觸發器元素
start: "top top", // 當觸發器的頂部碰到視口的頂部時
end: "+=500", // 在滾動 500 px後結束
scrub: 1, // 觸發器1秒後跟上滾動條
snap: {
snapTo: "labels", // 捕捉時間線中最近的標簽
duration: {min: 0.2, max: 3}, // 捕捉動畫應至少為 0.2 秒，但不超過 3 秒（由速度決定）
delay: 0.2, // 從上次滾動事件開始等待 0.2 秒，然後再進行捕捉
ease: "power1.inOut" // 捕捉動畫的過度時間（預設為“power3”）
}
}
});
// 向時間線添加動畫和標簽
tl.addLabel("start")
.from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
.addLabel("color")
.from(".box", {backgroundColor: "#28a92b"})
.addLabel("spin")
.to(".box", {rotation: 360})
.addLabel("end");
自定義示例
ScrollTrigger.create({
trigger: "#id",
start: "top top",
endTrigger: "#otherID",
end: "bottom 50%+=100px",
onToggle: self => console.log("toggled, isActive:", self.isActive),
onUpdate: self => {
console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());
}
});
接下來，我們一起來看使用ScrollTrigger可以實現什麼樣的效果吧~
效果演示
利用ScrollTrigger可以實現很多炫酷的效果，還有更多示例及源代碼，歡迎查閱官網哦~
