在现代的前端开发中，对于动态效果的需求越来越多，而一个好的网站动态效果必定离不开视觉滚动效果的辅助，而 ngx-parallax-scroll 就是一个非常优秀的 npm 包，它能够帮助我们轻松实现多重视觉滚动效果，下文将详细介绍并演示它的使用方法。
1. ngx-parallax-scroll 的安装
使用 npm 作为包管理工具，可以通过如下命令安装 ngx-parallax-scroll。
--- ------- ------------------- ------
安装完成后，需要将 NgxParallaxScrollModule 在你的应用中导入，具体步骤如下：
------ - ----------------------- - ---- ----------------------
-----------
-------- -
------------------------
---
--
---
--
------ ----- --------- --2. 编写 Html 模板
使用 ngx-parallax-scroll 就跟使用普通的指令一样，在你的 html 模板中你可以用下面的方式来进行初始化：
---- ------------ ---- ------------------------------ ------------------------ -- ---- ------------------------------ ---------------------- -- ---- ------------------------------ ------------------------ -- ---- ------------------------------ ---------------------- -- ------
下面将详细分析及解释上面代码块中每一步的含义：
- ngxParallax 是 ngx-parallax-scroll 的核心指令，用于配置所有的滚动效果。
- 每一个滚动元素必须放在这个指令下面，我们将使用 img 元素作为例子，可以用其它元素进行替换。
- [ngxParallaxSpeed] 是 ngx-parallax-scroll 的一个速度指令，设定滚动元素的滚动速度，以实现视差滚动的效果。速度值越大，滚动距离越短，速度越小，滚动距离越长。值得一提的是 ngx-parallax-scroll 的速度指令不是唯一的，你也可以在作为新的指令配置。
3. 用 CSS 进行定制化
通过使用 CSS，你可以为你的滚动元素添加更多的样式，并达到自定义效果的目的。为了更好的理解滚动元素的定制化，我们将创建一个新的 css 文件并在 ngx-parallax-scroll 中使用。
让我们创建一个新的 app.component.scss 文件，并增加如下所示的代码，这里我们为图像添加一个黑色阴影。
--- - ----------- --- --- ---- ----- --- -
4. ng serve 启动应用
运行 ng serve 启动应用程序即可观察到 ngx-parallax-scroll 的完整效果，此时你可以通过鼠标滚轮来控制图像的视差滚动效果，并且它的运行速度不会受到影响。 可以在 demo 中观看这个效果 (ngx-parallax-scroll Demo)。
5. 总结
ngx-parallax-scroll 是一个非常好用的 npm 包，它可以帮助我们轻松实现多重视觉滚动效果。 本教程中我们了解了其安装过程，如何编写 html 模板、使用 CSS 进行定制化并启动 ngx-parallax-scroll 的应用程序。对于毫不懂的前端也是非常友好的，希望在学习过程中能够帮助您更加深入了解前端技术。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067380890c4f72775841ab