简介
rellax 是一个轻量级的 JavaScript 库，用于创建流畅的视差滚动效果。它是由 Matthew Wagerfield 创建并维护的。使用 rellax 可以很容易地为网站添加视差效果，从而增强用户体验。
安装
使用 npm 可以非常简单地安装 rellax，只需要在命令行中执行以下命令即可：
--- ------- ------
基本用法
要使用 rellax，首先需要将其导入到你的项目中。可以通过以下方式实现：
------ ------ ---- ---------
接下来，为了启用 rellax，需要在文档加载时实例化 Rellax 对象并传入一个目标元素作为参数。例如，假设你有一个带有 ID 为 parallax 的 <div>，那么可以按照以下方式初始化 rellax：
----- ------ - --- --------------------
这将使得 rellax 开始监听滚动事件，并对目标元素进行视差计算和渲染。
高级用法
选项
rellax 还提供了一些配置选项，可以在实例化时进行设置。以下是可用的选项及其默认值：
-
------ ---
------- ------
-------- -----
------ -----
--------- -----
----------- ------
--------- ----
-speed：视差效果的速度。默认值为-2，表示元素将以两倍于正常滚动速度的速度进行滚动。center：如果设置为true，则视差效果将在屏幕中心而不是顶部开始。默认值为false。wrapper：一个用作容器的 DOM 元素。如果提供了此选项，则视差效果仅在包裹元素内进行渲染。round：是否应该将计算后的位置四舍五入到最接近的像素。默认值为true。vertical和horizontal：这些选项可以用来控制在哪个方向上启用视差效果。默认情况下，横向效果被禁用，纵向效果被启用。callback：当视差元素处理完毕时要调用的回调函数。
这些选项可以在实例化 Rellax 对象时作为第二个参数传递：
----- ------ - --- ------------------- - ------ --- ------- ----- ------ ----- ---
API
rellax 提供了一些方法和属性，可以用来访问和操作它所创建的视差效果。以下是可用的 API：
destroy()：销毁rellax对象，并停止监听滚动事件。refresh()：重新计算元素的位置和大小，并更新视差效果。update(speed)：更新视差效果的速度。
例如，要更新 rellax 的速度，可以这样做：
------------------
示例
以下是一个简单的示例，展示了如何在你的网站上使用 rellax 创建一个基本的视差效果。HTML 代码如下：
---- ------------- -----------------
---- ---------------------- --------------------
---- ----------------------------------- -------
------
---- ---------------------- --------------------
---- ------------------------------------ -------
------
------CSS
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33890