如何使用机车滚动来进行各种滚动效果

最近，我需要在项目中实现滚动效果，并发现了机车滚动库。该功能强大的工具可实现广泛的滚动效果，包括基于滚动位置的视差滚动和动画控制。

虽然经常被归类为“光滑滚动”库，但它并不依赖于本机光滑的滚动。相反，它虚拟化滚动，保证一致的光滑度。这种技术有时被称为“滚动夹克”，可能是有争议的，但是用户体验研究对其整体影响提供了不同的结论。图书馆的主页清楚地证明了其功能和感觉。

让我们探讨使用机车滚动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中文网其他相关文章！