vue-prlx是Vue.js视差插件/指令，可将可自定义的视差滚动效果应用于应用程序中的图像。

安装和下载：

# Yarn
$ yarn add vue-prlx
# NPM
$ npm install vue-prlx --save

使用

1.安装并导入vue-prlx。

import Vue from 'vue'
import VuePrlx from 'vue-prlx'
import { VuePrlxDirective } from 'vue-prlx'

2.注册vue-prlx。

Vue.use(VuePrlx);

Vue.directive('prlx', VuePrlxDirective);

3.对图像应用默认的视差效果。

<img v-prlx>

4.在手机上启用/禁用视差滚动效果。

<img v-prlx.mobile>

5.对背景图像应用视差效果。

<img v-prlx.background="{ speed: 0.07 }"">

6.配置视差滚动效果的可能选项。

// {boolean} – 在移动设备上启用视差
isParallaxOnMobile: modifiers.mobile || false,

// {boolean} – 设置背景位置动画而不是平移
background: modifiers.background || false,

// {boolean} – 从页面最底部而不是中间开始视差
startParallaxFromBottom: value.fromBottom || false,

// {boolean} – 只需将'--parallax-value' css变量添加到自定义动画的元素中
// 添加css例子： transform: scale(calc(var(--parallax-value) / 50 ))
justAddParallaxValue: value.custom || false,

// {boolean} – 反向
reverse: value.reverse || false,

// {number} – 视差功率
speed: value.speed || 0.15,

// {boolean} – 能视差为负值吗
preserveInitialPosition: value.preserveInitialPosition === false
? value.preserveInitialPosition
: true,

// {string} – 'x' - 水平视差, 'y' - 垂直
direction: value.direction || 'y',

// {object} – limit.min，limit.max偏移
limit: value.limit || null,

// {number} – 移动最大宽度
mobileMaxWidth: value.mobileMaxWidth || 768,

// {boolean} – 视差是否禁用
isDisabled: value.disabled || false