• ? Github Star:14.9K [1]

• ? 官網(wǎng)[2]

ScrollMagic 是一個(gè)強(qiáng)大的 JavaScript 庫(kù)，專(zhuān)門(mén)用于創(chuàng)建豐富而細(xì)膩的滾動(dòng)動(dòng)畫(huà)效果。它能夠精確地控制頁(yè)面滾動(dòng)時(shí)的動(dòng)畫(huà)和行為，使得網(wǎng)頁(yè)的交互體驗(yàn)更加生動(dòng)有趣。本文將詳細(xì)介紹 ScrollMagic 的基本用法、特點(diǎn)、常見(jiàn)應(yīng)用場(chǎng)景以及如何與其他動(dòng)畫(huà)庫(kù)如 GSAP 和 Velocity 結(jié)合使用。

ScrollMagic 的特點(diǎn)

ScrollMagic 的特點(diǎn)在于其輕量級(jí)、可擴(kuò)展性、移動(dòng)端兼容性、響應(yīng)式設(shè)計(jì)支持以及鏈?zhǔn)骄幊痰哪芰?。這些特點(diǎn)使得 ScrollMagic 成為實(shí)現(xiàn)復(fù)雜滾動(dòng)動(dòng)畫(huà)的利器。

快速開(kāi)始

以下是一個(gè)簡(jiǎn)單的 ScrollMagic 入門(mén)示例。示例將展示如何使用 ScrollMagic 庫(kù)來(lái)創(chuàng)建一個(gè)基本的滾動(dòng)動(dòng)畫(huà)效果。使用 ScrollMagic 之前，需要先引入庫(kù)文件。然后，創(chuàng)建一個(gè)控制器（Controller）實(shí)例，并定義場(chǎng)景（Scene），場(chǎng)景定義了何時(shí)觸發(fā)動(dòng)畫(huà)以及動(dòng)畫(huà)的持續(xù)時(shí)間。

HTML 結(jié)構(gòu)示例：

<div class="header">ScrollMagic Example</div>
<div class="section">Scroll down to see the magic!</div>
<div class="section pin">This section will be pinned.</div>
<div class="section">Keep scrolling...</div>

創(chuàng)建了三個(gè) .section 元素，其中第二個(gè)元素將被固定（pinned）。具體示例請(qǐng)公眾號(hào)回復(fù) "demo" 獲取。

JavaScript 實(shí)現(xiàn)：

 // 初始化 ScrollMagic 控制器
var controller = new ScrollMagic.Controller();

// 創(chuàng)建一個(gè)場(chǎng)景
var scene = new ScrollMagic.Scene({
    triggerElement: ".pin", // 觸發(fā)動(dòng)畫(huà)的元素
    triggerHook: 0.5, // 在視口中間觸發(fā)
    duration: "100%" // 固定元素的持續(xù)時(shí)間為視口高度
})
.setPin(".pin") // 固定元素
.addIndicators() // 添加指示器（需要 debug.addIndicators.js）
.addTo(controller); // 將場(chǎng)景添加到控制器

在上述代碼中，當(dāng)頁(yè)面滾動(dòng)到 .pin 元素時(shí)，該元素將被固定在視口中 。

示例效果

常見(jiàn)應(yīng)用場(chǎng)景

ScrollMagic 常用于實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)的動(dòng)態(tài)效果，如導(dǎo)航欄的固定、視差效果的背景圖、內(nèi)容的逐步揭示等。它特別適用于增強(qiáng)網(wǎng)頁(yè)的視覺(jué)效果和用戶(hù)體驗(yàn)。

• ? 電商網(wǎng)站的商品列表滾動(dòng)時(shí)動(dòng)態(tài)加載產(chǎn)品詳情。

• ? 博客或新聞網(wǎng)站通過(guò)滾動(dòng)揭示文章內(nèi)容，引導(dǎo)讀者深入閱讀。

• ? 旅游網(wǎng)站通過(guò)滾動(dòng)展示不同景點(diǎn)的介紹，提升用戶(hù)的參與感。

與其他動(dòng)畫(huà)庫(kù)的結(jié)合使用

ScrollMagic 可以與 GSAP 或 Velocity 等動(dòng)畫(huà)庫(kù)結(jié)合使用，實(shí)現(xiàn)更加豐富和流暢的動(dòng)畫(huà)效果。

GSAP 結(jié)合示例：

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    offset: 100,
    duration: 200,
});
scene.setPin(".section:nth-of-type(1)");
let myTween = gsap.to(".anim", {
    width: 200,
    height: 200
});
scene.setTween(myTween);
controller.addScene(scene);

Velocity 結(jié)合示例：

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    offset: 100
});
scene.setPin(".section:nth-of-type(1)");
scene.setVelocity(".anim", {
    width: "200px",
    height: "200px"
}, {
    duration: 3000
});
controller.addScene(scene);

更多示例請(qǐng)前往 Github 查看

事件監(jiān)聽(tīng)

ScrollMagic 還允許開(kāi)發(fā)者監(jiān)聽(tīng)場(chǎng)景的事件，如開(kāi)始、結(jié)束和進(jìn)度事件，以便在動(dòng)畫(huà)的不同階段執(zhí)行自定義邏輯。

事件監(jiān)聽(tīng)示例：

scene.on("start", function (event) {
    console.log("Start");
});
scene.on("end", function (event) {
    console.log("End");
});
scene.on("progress", function (event) {
    console.log("Progress", event.progress);
});

總結(jié)

ScrollMagic 提供了一種創(chuàng)新的方式來(lái)增強(qiáng)網(wǎng)頁(yè)的互動(dòng)性和視覺(jué)吸引力。通過(guò)本文的介紹，我們可以看到 ScrollMagic 如何通過(guò)簡(jiǎn)單的代碼實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果，并與其他動(dòng)畫(huà)庫(kù)如 GSAP 和 Velocity 結(jié)合使用，創(chuàng)造出更加豐富多樣的視覺(jué)體驗(yàn)。

無(wú)論是創(chuàng)建產(chǎn)品展示頁(yè)面，還是為博客增添互動(dòng)元素，ScrollMagic 都是一個(gè)值得深入探索的工具，能夠幫助大家將創(chuàng)意變?yōu)楝F(xiàn)實(shí)，提升用戶(hù)體驗(yàn)。

祝好！

往期回顧

• ? Gatsby，一款神奇的 JavaScript 開(kāi)源靜態(tài)網(wǎng)站生成器？

• ? Gridstack.js，一款神奇的 JavaScript 開(kāi)源網(wǎng)格布局庫(kù)？構(gòu)建交互式的儀表板就是這么簡(jiǎn)單！

• ? Tone.js，一款神奇的 JavaScript 開(kāi)源網(wǎng)絡(luò)音頻庫(kù)？為交互式音樂(lè)而設(shè)計(jì)。

引用鏈接

[1] Github Star:14.9K : https://github.com/janpaepke/ScrollMagic
[2] 官網(wǎng): http://scrollmagic.io/