Description:
vue-prlx is a Vue.js parallax plugin/directive that applies a customizable parallax scrolling effect to images within the app.
How to use it:
1. Install and import the vue-prlx.
import Vue from 'vue'
// As a plugin
import VuePrlx from 'vue-prlx'
// As a directive
import { VuePrlxDirective } from 'vue-prlx'
2. Register the vue-prlx.
// As a plugin
Vue.use(VuePrlx);
// As a directive
Vue.directive('prlx', VuePrlxDirective);
3. Apply a default parallax effect to your image.
<img v-prlx>
4. Enable/disable the parallax scrolling effect on mobile.
<img v-prlx.mobile>
5. Apply a parallax effect to background images.
<img v-prlx.background="{ speed: 0.07 }"">
6. Possible options to config the parallax scrolling effect.
// {boolean} – enable parallax on mobile
isParallaxOnMobile: modifiers.mobile || false,
// {boolean} – animate background-position instead of translate
background: modifiers.background || false,
// {boolean} – start parallax from very bottom of the page instead of middle
startParallaxFromBottom: value.fromBottom || false,
// {boolean} – just add '--parallax-value' css variable to element for your custom animations
// so add css for example: transform: scale(calc(var(--parallax-value) / 50 ))
justAddParallaxValue: value.custom || false,
// {boolean} – reverse direction
reverse: value.reverse || false,
// {number} – parallax power
speed: value.speed || 0.15,
// {boolean} – can parallax to negative values
preserveInitialPosition: value.preserveInitialPosition === false
? value.preserveInitialPosition
: true,
// {string} – 'x' - horizontal parallax, 'y' - vertical
direction: value.direction || 'y',
// {object} – limit.min, limit.max offset
limit: value.limit || null,
// {number} – mobile max width
mobileMaxWidth: value.mobileMaxWidth || 768,
// {boolean} – is parallax disabled
isDisabled: value.disabled || false
Download Details:
Author: gerasimvol
Live Demo: http://vue-prlx.surge.sh/
Download Link: https://github.com/gerasimvol/vue-prlx/archive/master.zip
Official Website: https://github.com/gerasimvol/vue-prlx
Install & Download:
# Yarn
$ yarn add vue-prlx
# NPM
$ npm install vue-prlx --save