最近，我需要在項(xiàng)目中實(shí)現(xiàn)滾動(dòng)效果，并發(fā)現(xiàn)了機(jī)車滾動(dòng)庫。該功能強(qiáng)大的工具可實(shí)現(xiàn)廣泛的滾動(dòng)效果，包括基于滾動(dòng)位置的視差滾動(dòng)和動(dòng)畫控制。

雖然經(jīng)常被歸類為“光滑滾動(dòng)”庫，但它并不依賴于本機(jī)光滑的滾動(dòng)。相反，它虛擬化滾動(dòng)，保證一致的光滑度。這種技術(shù)有時(shí)被稱為“滾動(dòng)夾克”，可能是有爭議的，但是用戶體驗(yàn)研究對(duì)其整體影響提供了不同的結(jié)論。圖書館的主頁清楚地證明了其功能和感覺。

讓我們探討使用機(jī)車滾動(dòng)JavaScript創(chuàng)建引人入勝的用戶體驗(yàn)的基本原理。

了解機(jī)車滾動(dòng)

正如開發(fā)人員所描述的那樣：

機(jī)車滾動(dòng)是在Ayamflow的虛擬頻率頂部建立的直接滾動(dòng)庫。它提供平滑的滾動(dòng)，并支持視差效果，類切換和元素輸入視口時(shí)觸發(fā)的事件偵聽器。

本質(zhì)上，它可以監(jiān)視視口內(nèi)的元素可見性，并動(dòng)態(tài)調(diào)整CSS transform屬性值以生成滾動(dòng)效果。

滾動(dòng)效果通常稱為視差，在滾動(dòng)過程中，背景元素的移動(dòng)似乎比前景元素慢，從而產(chǎn)生了深度效果。想象一下，從移動(dòng)的汽車中查看風(fēng)景：遙遠(yuǎn)的物體似乎移動(dòng)緩慢，而附近的景象迅速移動(dòng)。莎拉·德拉斯納（Sarah Drasner）的Codepen提供了這種效果的視覺示例。

它如何工作

機(jī)車卷軸利用特定的HTML屬性。具有這些屬性的元素觸發(fā)JavaScript事件偵聽器輸入視口，然后將CSS transform為內(nèi)聯(lián)樣式。

兩個(gè)關(guān)鍵屬性至關(guān)重要：

• data-scroll ：檢測(cè)視口內(nèi)的元素可見性。
• data-scroll-container ：包含要監(jiān)視滾動(dòng)的所有HTML內(nèi)容。

transform屬性值在HTML中作為內(nèi)聯(lián)樣式在HTML中動(dòng)態(tài)更新。

設(shè)置機(jī)車滾動(dòng)

可以直接通過<link>使用CDN標(biāo)記：

<link href="https://cdn.jsdelivr.net/npm/%5Bemail%C2%A0protected%5D/dist/locomotive-scroll.css" rel="stylesheet">

然后，找到滾動(dòng)容器并初始化庫：

 const scroller = new locomotivesCroll（{{
  EL：document.queryselector（'[[Data-Scroll-container]'），），
  平滑：是的
}）;

另外，請(qǐng)使用NPM進(jìn)行安裝（ npm install locomotive-scroll ）并導(dǎo)入它：

從“機(jī)車 - 滾動(dòng)”中導(dǎo)入機(jī)車旋轉(zhuǎn)；

const scroll = new locomotivesCroll（）;

Skypack還提供了導(dǎo)入庫的替代方法。

設(shè)置非常簡單明了。

示例和屬性

機(jī)車卷軸受益大量應(yīng)用。讓我們檢查幾個(gè)示例及其相關(guān)屬性：

下面的HTML利用了各種data-*屬性。除了data-scroll和data-scroll-container之外，我們還有：

• data-scroll-section ：定義可滾動(dòng)部分。將頁面分為部分可以提高性能。
• data-scroll-direction ：指定垂直或水平運(yùn)動(dòng)。
• data-scroll-speed ：控制元素運(yùn)動(dòng)速度。負(fù)值反向垂直方向，除非還使用了data-scroll-direction 。
• data-scroll-sticky ：在其目標(biāo)保持可見的同時(shí)，將元素粘在視口上。
• data-scroll-target ：使用ID選擇器定位特定元素。

data-scroll-sticky需要相應(yīng)的data-scroll-target屬性，通常引用容器元素。

<div data-scroll-section="">
  <p data-scroll="" data-scroll-sticky="" data-scroll-target="#stick">
    此元素將粘在視口上。
  </p>
</div>

進(jìn)一步的示例展示了其他用法方案。機(jī)車滾動(dòng)還與包括React在內(nèi)的各種框架集成在一起。

結(jié)論

機(jī)車滾動(dòng)是一個(gè)非常強(qiáng)大且易于使用的庫，用于添加復(fù)雜的滾動(dòng)效果。它的簡單性和有效性使其成為增強(qiáng)用戶體驗(yàn)的理想解決方案。

以上是如何使用機(jī)車滾動(dòng)來進(jìn)行各種滾動(dòng)效果的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！