在现代的前端开发中,对于动态效果的需求越来越多,而一个好的网站动态效果必定离不开视觉滚动效果的辅助,而 ngx-parallax-scroll 就是一个非常优秀的 npm 包,它能够帮助我们轻松实现多重视觉滚动效果,下文将详细介绍并演示它的使用方法。
1. ngx-parallax-scroll 的安装
使用 npm 作为包管理工具,可以通过如下命令安装 ngx-parallax-scroll。
npm install ngx-parallax-scroll --save
安装完成后,需要将 NgxParallaxScrollModule 在你的应用中导入,具体步骤如下:
-- -------------------- ---- ------- ------ - ----------------------- - ---- ---------------------- ----------- -------- - ------------------------ --- -- --- -- ------ ----- --------- --
2. 编写 Html 模板
使用 ngx-parallax-scroll 就跟使用普通的指令一样,在你的 html 模板中你可以用下面的方式来进行初始化:
<div ngxParallax> <img src="assets/images/image1.jpg" [ngxParallaxSpeed]="0.5" /> <img src="assets/images/image2.jpg" [ngxParallaxSpeed]="1" /> <img src="assets/images/image3.jpg" [ngxParallaxSpeed]="1.5" /> <img src="assets/images/image4.jpg" [ngxParallaxSpeed]="2" /> </div>
下面将详细分析及解释上面代码块中每一步的含义:
- ngxParallax 是 ngx-parallax-scroll 的核心指令,用于配置所有的滚动效果。
- 每一个滚动元素必须放在这个指令下面,我们将使用 img 元素作为例子,可以用其它元素进行替换。
- [ngxParallaxSpeed] 是 ngx-parallax-scroll 的一个速度指令,设定滚动元素的滚动速度,以实现视差滚动的效果。速度值越大,滚动距离越短,速度越小,滚动距离越长。值得一提的是 ngx-parallax-scroll 的速度指令不是唯一的,你也可以在作为新的指令配置。
3. 用 CSS 进行定制化
通过使用 CSS,你可以为你的滚动元素添加更多的样式,并达到自定义效果的目的。为了更好的理解滚动元素的定制化,我们将创建一个新的 css 文件并在 ngx-parallax-scroll 中使用。
让我们创建一个新的 app.component.scss 文件,并增加如下所示的代码,这里我们为图像添加一个黑色阴影。
img { box-shadow: 0px 0px 10px #000; ... }
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