Home Animation Plugins A Plugin For Vue That Adds A Parallax Effect Directive By rellax.js

A Plugin For Vue That Adds A Parallax Effect Directive By rellax.js

Animation Plugins webcodeflow · March 8, 2022 · Comments off

vue-relax is a directive library for Vue.js that implements a configurable scroll effect on the application based on the Rellax.js library.

vue rellax, parallax js, vue 3 parallax, vue parallax background image, vue parallax image, parallax js library

Object Detection in Viewport and Smooth Scrolling With Parallax Effects | Locomotive Scroll

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-rellax

# NPM
$ npm i vue-rellax --save

1. Import and register a 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
    }
  }
})

Vue Parallax Directive Based On Rellax.js Plugin/Github