Vue.js 中的视差效果

作为前端开发人员,您通常需要创建不同类型的互动和动画,例如 parallax:这种效果使背景图像滚动更慢,从而产生更深的屏幕幻觉。

我们已经向您展示了如何做到这一点(使用简单的CSS),但如果您不想走那条路径,并且正在为您的应用程序使用Vue.js,它可以更简单。

这就是 vue-parallaxy通过为您提供一个处理 parallax 效应的组件来发挥作用的地方。

简单的演示

首先,您需要通过运行以下命令来安装 vista-parallaxy:

1$ npm install vue-parallaxy
2
3# or, using Yarn
4$ yard add vue-parallaxy

由于 vista-parallaxy 是一个组件,您需要在需要的地方导入它,就像任何其他组件一样:

1import Parallax from "vue-parallaxy";
2
3export default {
4  components: {
5    Parallax
6  }
7};

最后,您只需要将图像传递给组件:

1<parallax>
2  <img src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg">
3</parallax>

由于它通过使用插槽工作,您还可以传递一个<图片>元素或具有src-set属性的图像。

选择

vue-parallaxy为您提供不同的选择来定制其行为,您可以通过代理传递。

speedFactor 是一个因素值,决定了效果的侵略性,其范围从 0 (无) 到 1 (最侵略),0.15 是默认值:

1<parallax :speed-factor="0.3">
2  <img src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg">
3</parallax>

一个有趣的事实是,默认情况下,parallax效应在移动设备上被禁用,这取决于一个破点属性,默认情况是(min-width: 968px),所以如果你想让它在更小的屏幕上工作,你可以将其设置为更小的值:

1<parallax :speed-factor="0.3" breakpoint="(min-width: 80px)">
2  <img src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg">
3</parallax>

你可以看到完整的 API 在文档中。

包装上

您已经看到如何在Vue应用程序中使用Vue-parallaxy创建Parallax效果,以及一些自定义其行为的示例。

此外,您可以看到本文的代码和演示文稿在 this codesandbox。