在网站构建中，视觉滚动特效是吸引用户注意力和提高用户体验的绝佳方式。想要在网站中实现视觉滚动特效，可以使用 npm 包 simple-parallax。
安装 simple-parallax
安装 simple-parallax 的命令如下：
npm install simple-parallax --save
使用 simple-parallax
使用 simple-parallax 的过程包括两部分：HTML 和 JavaScript。
编写 HTML
首先，需要在 HTML 中创建一个容器元素，作为 simple-parallax 的作用范围，例如：
<div class="parallax-container"> <img src="path/to/image" class="parallax-img" alt="an example image"> </div>
其中，.parallax-container 提供了 simple-parallax 的作用范围，.parallax-img 是一个图片元素，可以替换为其他元素。
编写 JavaScript
其次，需要在 JavaScript 中使用简单的代码实例化 simple-parallax：
-- -------------------- ---- -------
------ -------- ---- --------------------
--------------------------------------------- -- -- -
--- ---------------------------------------------------- -
------ ----
----------- ------------------------
------ ---
--
--这里，通过 import 语句引入 simple-parallax 包，然后创建一个函数，该函数包含简单的 JavaScript 代码，用于初始化 simple-parallax。其中，querySelectorAll 方法选择所有 .parallax-img 元素，并将传递到 simple-parallax 的选项作为第二个参数传递。
simple-parallax 的选项
simple-parallax 提供了多个选项，可以控制它的行为：
delay
该选项定义了图片行进的时间（以毫秒为单位）。例如，delay: 0.6 将导致图片在 0.6 秒内滚动到其最终位置（默认值为 0.4）。
transition
该选项定义了图片的过渡效果，可以是 CSS 过渡函数的字符串值。例如，transition: 'cubic-bezier(0,0,0,1)' 将在滚动时应用一个具有 100% 加速度的过渡效果（默认为 ease-out）。
scale
该选项定义了图片缩放的倍数，浮点数表示。例如，scale: 1.5 将使图片的大小增加一倍半（默认为 1）。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ---------------
-------
------------------- -
------- ------
--------- -------
--------- ---------
-
------------- -
-------- ------
------- -----
----- ----
----------- -----
---------- -----
----------- --
---------- --
--------- ---------
------ --
---- ----
---------- --------------- ------
------ -----
-------- ---
-
--------
-------
------
---------- -------- ------------
---- ---------------------------
---- ------------------------------------ -------------------- ------- ------- -------
------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- --------------
------- -------------------------------------------------------
--------
--------------------------------------------- -- -- -
--- ---------------------------------------------------- -
------ ----
----------- ------------------------
------ ---
--
--
---------
-------
-------通过简单修改上述代码，可以轻松实现自己网站前端的视觉滚动特效。希望在使用 simple-parallax 的过程中，能够在困难中找到突破的方法，同时也希望在这些过程中能够对视觉滚动特效有所掌握和提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606781e8991b448de891