Vue基于Rellax.js的视差指令 - vue-rellax

Vue基于Rellax.js的视差指令 - vue-rellax
插件名称 vue-rellax
发布时间 2020年10月9日
插件作者 croutonn

一个Vue.js指令库,该基于Rellax.js库将可配置的视差滚动效果应用于应用程序。

安装和下载:

# Yarn
$ yarn add vue-rellax

# NPM
$ npm i vue-rellax --save

基本用法:

1.导入并注册VueRellax指令。

import VueRellax from 'vue-rellax'
Vue.use(VueRellax);

2.向元素添加视差滚动效果,如下所示:

const vm = new Vue({
  el: '#app',
  template: `
    <div>
      <p v-rellax="rellax">
        Parallax Content
      </p>
      <button type="button" @click="destroyRellax">Destroy</button>
    </div>
  `,
  data() {
    return {
      rellax: {
        speed: -2
      }
    }
  },
  methods: {
    destroyRellax() {
      this.rellax = false
    }
  }
})