Vue Parallax Directive Based On Rellax.js

Install & Download:

# Yarn
$ yarn add vue-rellax
# NPM
$ npm i vue-rellax --save

Description:

A Vue.js directive library that applies a configurable parallax scrolling effect to the app based on the Rellax.js library.

Basic Usage:

1. Import and register the VueRellax directive.

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

2. Add a parallax scrolling effect to an element as follows:

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
    }
  }
})