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

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 i vue-rellax --save

1. Import and register a 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 Plugin/Github

See Demo And Download

Official Website(croutonn): Click Here

This superior jQuery/javascript plugin is developed by croutonn. For extra Advanced Usages, please go to the official website.

Related Posts


[Off-Canvas] Simple and Clean Side Navigation Menu With Dropdowns | jSide Menu

JSide menu is a well-designed, simple, and clean side-scrolling menu with dropdown menus. This plugin creates a sticky hamburger button at the top of the page that…


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…