Configurable Parallax Plugin/Directive – vue-prlx

Install & Download:

# Yarn
$ yarn add vue-prlx
# NPM
$ npm install vue-prlx --save

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