如何使用機車滾動來進行各種滾動效果

最近，我需要在項目中實現滾動效果，並發現了機車滾動庫。該功能強大的工具可實現廣泛的滾動效果，包括基於滾動位置的視差滾動和動畫控制。

雖然經常被歸類為“光滑滾動”庫，但它並不依賴於本機光滑的滾動。相反，它虛擬化滾動，保證一致的光滑度。這種技術有時被稱為“滾動夾克”，可能是有爭議的，但是用戶體驗研究對其整體影響提供了不同的結論。圖書館的主頁清楚地證明了其功能和感覺。

讓我們探討使用機車滾動JavaScript創建引人入勝的用戶體驗的基本原理。

了解機車滾動

正如開發人員所描述的那樣：

機車滾動是在Ayamflow的虛擬頻率頂部建立的直接滾動庫。它提供平滑的滾動，並支持視差效果，類切換和元素輸入視口時觸發的事件偵聽器。

本質上，它可以監視視口內的元素可見性，並動態調整CSS transform屬性值以生成滾動效果。

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

它如何工作

機車捲軸利用特定的HTML屬性。具有這些屬性的元素觸發JavaScript事件偵聽器輸入視口，然後將CSS transform為內聯樣式。

兩個關鍵屬性至關重要：

• data-scroll ：檢測視口內的元素可見性。
• data-scroll-container ：包含要監視滾動的所有HTML內容。

transform屬性值在HTML中作為內聯樣式在HTML中動態更新。

設置機車滾動

可以直接通過<link>使用CDN標記：

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

然後，找到滾動容器並初始化庫：

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

另外，請使用NPM進行安裝（ npm install locomotive-scroll ）並導入它：

從“機車 - 滾動”中導入機車旋轉；

const scroll = new locomotivesCroll（）;

Skypack還提供了導入庫的替代方法。

設置非常簡單明了。

示例和屬性

機車捲軸受益大量應用。讓我們檢查幾個示例及其相關屬性：

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

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

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

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

進一步的示例展示了其他用法方案。機車滾動還與包括React在內的各種框架集成在一起。

結論

機車滾動是一個非常強大且易於使用的庫，用於添加複雜的滾動效果。它的簡單性和有效性使其成為增強用戶體驗的理想解決方案。

以上是如何使用機車滾動來進行各種滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！