大家好,我是程序視點(diǎn)的小二哥!今天小二哥帶領(lǐng)大家學(xué)習(xí)如何使用最少的代碼創(chuàng)建令人嘆為觀止的滾動動畫~

在聊ScrollTrigger插件之前我們先簡單了解下GSAP。

GreenSock 動畫平臺 （GSAP） 可為 JavaScript 可以操作的任何內(nèi)容（CSS 屬性、SVG、React、畫布、通用對象等）動畫化，并解決不同瀏覽器上存在的兼容問題，而且比 jQuery快 20 倍。大約1000萬個網(wǎng)站和許多主要品牌都在使用GSAP。

接下來小二哥帶領(lǐng)大家一起學(xué)習(xí)ScrollTrigger插件的使用。

插件簡介

ScrollTrigger是基于GSAP實(shí)現(xiàn)的一款高性能頁面滾動觸發(fā)HTML元素動畫的插件。通過ScrollTrigger使用最少的代碼創(chuàng)建令人嘆為觀止的滾動動畫。我們需要知道ScrollTrigger是基于GSAP實(shí)現(xiàn)的插件，ScrollTrigger是處理滾動事件的，而真正處理動畫是GSAP，二者組合使用才能實(shí)現(xiàn)滾動動畫~

插件特點(diǎn)

• 將任何動畫鏈接到特定元素，以便它僅在視圖中顯示該元素時才執(zhí)行該動畫。
• 可以在進(jìn)入/離開定義的區(qū)域或?qū)⑵渲苯渔溄拥綕L動欄時在動畫上執(zhí)行操作（播放、暫停、恢復(fù)、重新啟動、反轉(zhuǎn)、完成、重置）。
• 延遲動畫和滾動條之間的同步。
• 根據(jù)速度捕捉動畫中的進(jìn)度值。
• 嵌入滾動直接觸發(fā)到任何 GSAP 動畫（包括時間線）或創(chuàng)建獨(dú)立實(shí)例，并利用豐富的回調(diào)系統(tǒng)做任何您想做的事。
• 高級固定功能可以在某些滾動位置之間鎖定一個元素。
• 靈活定義滾動位置。
• 支持垂直或水平滾動。
• 豐富的回調(diào)系統(tǒng)。
• 當(dāng)窗口調(diào)整大小時，自動重新計(jì)算位置。
• 在開發(fā)過程中啟用視覺標(biāo)記，以準(zhǔn)確查看開始/結(jié)束/觸發(fā)點(diǎn)的位置。
• 在滾動記錄器處于活動狀態(tài)時，如將active類添加到觸發(fā)元素中：toggleClass: "active"
• 使用 matchMedia() 標(biāo)準(zhǔn)媒體查詢?yōu)楦鞣N屏幕尺寸創(chuàng)建不同的設(shè)置。
• 自定義滾動觸發(fā)器容器，可以定義一個 div 而不一定是瀏覽器視口。
• 高度優(yōu)化以實(shí)現(xiàn)最大性能。
• 插件大約只有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,???//?在執(zhí)行時固定觸發(fā)器元素  
??????start:?"top?top",?//?當(dāng)觸發(fā)器的頂部碰到視口的頂部時  
??????end:?"+=500",?//?在滾動?500?px后結(jié)束  
??????scrub:?1,?//?觸發(fā)器1秒后跟上滾動條  
??????snap:?{  
????????snapTo:?"labels",?//?捕捉時間線中最近的標(biāo)簽  
????????duration:?{min:?0.2,?max:?3},?//?捕捉動畫應(yīng)至少為?0.2?秒，但不超過?3?秒（由速度決定）?  
????????delay:?0.2,?//?從上次滾動事件開始等待?0.2?秒，然后再進(jìn)行捕捉?  
????????ease:?"power1.inOut"?//?捕捉動畫的過度時間（默認(rèn)為“power3”）?  
??????}  
????}  
??});  
  
//?向時間線添加動畫和標(biāo)簽?  
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可以實(shí)現(xiàn)什么樣的效果吧~

效果演示

利用ScrollTrigger可以實(shí)現(xiàn)很多炫酷的效果，還有更多示例及源代碼，歡迎查閱官網(wǎng)哦~文章來源地址http://www.zghlxwxcb.cn/news/detail-624500.html

到了這里，關(guān)于膜拜！用最少的代碼卻實(shí)現(xiàn)了最牛逼的滾動動畫！的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！