croutonn / vue-rellax

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

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

vue-rellax's Issues

Should "percentage" work with this implementation ?

Hi guys !
I sucessfully managed to use the speed parameter, but "percentage" doesn't seem to work, it this functionality implemented ?
I'm trying to use is like this :
<div class="container" v-rellax="{ speed: -5, percentage: 0.5 }">
Cheers and thanks !

[Vue warn]: Failed to resolve directive: relax

Hello

Got this error [Vue warn]: Failed to resolve directive: relax

I have import VueRellax from 'vue-rellax' and Vue.use(VueRellax) :)

vue : ^2.5.17
vue-rellax: ^0.1.0

Thanks ;)

expose refresh method

is there a way to call .refresh()?

in my case rellax seems to init too early, although images are loaded, transform calculation are messed up. it works after a window resize, so i'd like to call .refresh, after my view is fully rendered.

update() Function not reachable

I was not able to update the view. Rellax got the update function which I cannot find.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@typehut:maintenance)

Rellax `wrapper` property

Does this plugin support the wrapper property of Rellax? I tried it but it seems it breaks the functioning of the plugin, the translates of elements do not update

How to load vue-rellax after page is rendered?

Hi,

I have like 25+ images (from api get method) in a v-for, I want to load rellax after the entire page is loaded.

When i scroll to the bottom, the images are all messed up in position. any way i can make the parallax start only when its visible in the screen after scroll?

Thanks!

How can I pass the mobile and tablet speed?

How can I use the data-rellax-mobile-speed and data-rellax-tablet-speed ?

relax != rellax

Sorry for the noize, thanks for this plugin ;)
you can close my 2 issues 💃