在前端开发中，常常会遇到需要实现页面滚动效果的情况。而其中，实现滚动时背景图或者图片之间跟随滚动的效果也是一种比较常见的需求。如果手动实现无疑是很麻烦的，那么我们应该如何去解决呢？这里介绍一个便捷的 npm 包 - parallazy。
1. 安装
使用 npm 安装 parallazy。
npm install parallazy --save
2. 使用
首先，首先导入包。
import Parallazy from 'parallazy';
然后，新建一个 Parallazy 实例并传入需要操作的元素，如下所示：
const parallaxDemo = new Parallazy('#parallax-container');其中，'#parallax-container' 代表你需要实现滚动效果的元素 ID 或者 class。
接着，你需要为每个需要滚动效果的元素（背景图或者图片），添加属性 data-parallax。值得一提的是，属性值为负数意味着背景图或者图片将向上移动，反之则向下移动。
<div id="parallax-container">
<section data-parallax="-0.5"></section>
<section data-parallax="0.5"></section>
<section data-parallax="1"></section>
<section data-parallax="1.5"></section>
</div>3. 示例代码
在此提供一份示例代码供大家参考。
html：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------------
-------
------------------- -
------- -----
-
------- -
------- -----
------ -----
------------------ ----------
---------------- ------
-
---------------------- -
----------------- -----------------------------------------------
-
---------------------- -
----------------- -----------------------------------------------
-
---------------------- -
----------------- -----------------------------------------------
-
---------------------- -
----------------- -----------------------------------------------
-
--------
-------
------
---- ------------------------
-------- -------------------------------
-------- ------------------------------
-------- ----------------------------
-------- ------------------------------
------
------- --------------------------
-------
-------js：
import Parallazy from 'parallazy';
const parallaxDemo = new Parallazy('#parallax-container');4. 结束语
本文介绍了 npm 包 parallazy 的使用方法，并提供了详细的代码示例。相信通过阅读本文，读者已经能够掌握 parallazy 包的使用方法，进一步丰富了前端技能树。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a4981e8991b448d7e97