Configurable Parallax Plugin/Directive With Vuejs

Description:

vue-prlx is a Vue.js parallax plugin/directive that applies a customizable parallax scrolling effect to images within the app.

Install & Download:

# Yarn
$ yarn add vue-prlx

# NPM
$ npm install vue-prlx --save

How to use it:

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'

// As a plugin
Vue.use(VuePrlx);

// As a directive
Vue.directive('prlx', VuePrlxDirective);

Apply a default parallax effect to your image.

<img v-prlx>

Enable/disable the parallax scrolling effect on mobile.

<img v-prlx.mobile>

Apply a parallax effect to background images.

<img v-prlx.background="{ speed: 0.07 }"">

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

#vuejs #javascript #vue-js