vue-rellax

A plugin of Vue that adds a directive for parallax effect by Rellax.js.

Getting Started

Install

npm i vue-rellax -S

or

yarn add vue-rellax

Browser Support

Since this plugin uses WeakMap, old browsers need to load pollyfill.

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=WeakMap"></script>

Usage

import Vue from 'vue'
import VueRellax from 'vue-rellax'

Vue.use(VueRellax)

const vm = new Vue({
  el: '#app',
  template: `
    <div v-rellax="{
      // Rellax Options
      // See: https://github.com/dixonandmoe/rellax#features
      speed: -2,
    }">
      I’m slow and smooth
    </div>
  `
})

Configure rellax defaults in a component's data object:

data() {
  return {
    rellax: {
      speed: -2
    }
  }
}

Destroy

To destroy, assign false to v-relax.

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

For Nuxt.js

In your nuxt.config.js

{
  plugins: [
    { src: '~~/node_modules/vue-rellax/lib/nuxt-plugin', ssr: false }
  ]
}