Vue Parallax Directive Based On Rellax.js


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'

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

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


Vue Parallax Directive Based On Rellax.js

Download Details:

Author: croutonn

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-rellax

$ npm i vue-rellax --save

You Might Be Interested In:


Add Comment