vue-rellax
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>
`
})
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 }
]
}
Dependencies
Dependencies
@types/chai: ^4.2.12@types/mocha: ^8.0.3@types/node: ^14.11.2@types/rellax: ^1.7.3@vue/test-utils: ^1.1.0chai: ^4.2.0cross-env: ^7.0.2es6-promise: ^4.2.8karma: ^5.2.3karma-chai: ^0.1.0karma-chrome-launcher: ^3.1.0karma-mocha: ^2.0.1karma-spec-reporter: ^0.0.32karma-typescript: ^5.2.0lint-staged: ^10.4.0mocha: ^8.1.3prettier: ^2.1.2puppeteer: ^5.3.1rimraf: ^3.0.2rollup: ^2.28.2rollup-plugin-commonjs: ^10.1.0rollup-plugin-node-resolve: ^5.2.0rollup-plugin-replace: ^2.2.0rollup-plugin-terser: ^7.0.2ts-node: ^9.0.0tslint: ^6.1.3tslint-config-prettier: ^1.18.0typescript: ^4.0.3vue: ^2.6.12vue-template-compiler: ^2.6.12