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