npm 包 rellax 使用教程

简介

rellax 是一个轻量级的 JavaScript 库，用于创建流畅的视差滚动效果。它是由 Matthew Wagerfield 创建并维护的。使用 rellax 可以很容易地为网站添加视差效果，从而增强用户体验。

安装

使用 npm 可以非常简单地安装 rellax，只需要在命令行中执行以下命令即可：

npm install rellax

基本用法

要使用 rellax，首先需要将其导入到你的项目中。可以通过以下方式实现：

import Rellax from 'rellax';

接下来，为了启用 rellax，需要在文档加载时实例化 Rellax 对象并传入一个目标元素作为参数。例如，假设你有一个带有 ID 为 parallax 的 <div>，那么可以按照以下方式初始化 rellax：

const rellax = new Rellax('#parallax');

这将使得 rellax 开始监听滚动事件，并对目标元素进行视差计算和渲染。

高级用法

选项

rellax 还提供了一些配置选项，可以在实例化时进行设置。以下是可用的选项及其默认值：

-- -------------------- ---- -------
-
    ------ ---
    ------- ------
    -------- -----
    ------ -----
    --------- -----
    ----------- ------
    --------- ----
-

• speed：视差效果的速度。默认值为 -2，表示元素将以两倍于正常滚动速度的速度进行滚动。
• center：如果设置为 true，则视差效果将在屏幕中心而不是顶部开始。默认值为 false。
• wrapper：一个用作容器的 DOM 元素。如果提供了此选项，则视差效果仅在包裹元素内进行渲染。
• round：是否应该将计算后的位置四舍五入到最接近的像素。默认值为 true。
• vertical 和 horizontal：这些选项可以用来控制在哪个方向上启用视差效果。默认情况下，横向效果被禁用，纵向效果被启用。
• callback：当视差元素处理完毕时要调用的回调函数。

这些选项可以在实例化 Rellax 对象时作为第二个参数传递：

const rellax = new Rellax('#parallax', {
  speed: -2,
  center: true,
  round: false
});

API

rellax 提供了一些方法和属性，可以用来访问和操作它所创建的视差效果。以下是可用的 API：

• destroy()：销毁 rellax 对象，并停止监听滚动事件。
• refresh()：重新计算元素的位置和大小，并更新视差效果。
• update(speed)：更新视差效果的速度。

例如，要更新 rellax 的速度，可以这样做：

rellax.update(-3);

示例

以下是一个简单的示例，展示了如何在你的网站上使用 rellax 创建一个基本的视差效果。HTML 代码如下：

<div id="parallax" class="parallax">
    <div class="parallax__layer parallax__layer--1">
        <img src="https://picsum.photos/400/800" alt="">
    </div>
    <div class="parallax__layer parallax__layer--2">
        <img src="https://picsum.photos/500/1000" alt="">
    </div>
</div>

CSS

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33890