Vue Parallax Directive Based On Rellax.js

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

Preview:

Vue Parallax Directive Based On Rellax.js

Download Details:

Author: croutonn

Live Demo: https://www.cssscript.com/demo/lightweight-vanilla-javascript-parallax-library-rellax/

Download Link: https://github.com/croutonn/vue-rellax/archive/master.zip

Official Website: https://github.com/croutonn/vue-rellax

Install & Download:

# Yarn
$ yarn add vue-rellax

# NPM
$ npm i vue-rellax --save

You Might Be Interested In:

Tags:

Add Comment