vue-parallax-js

vue component for parallax effect on elements
no dependencies
lightweight
1.6 KB - minified
for Vue.js 2

Setup ~

npm install --save vue-parallax-js
# or use yarn
# yarn add vue-parallax-js
			

in your main javascript file

// import Vue and vue-parallax-js
import Vue from 'vue'
import VueParallaxJs from 'vue-parallax-js'

// add vue-parallax-js to vue
Vue.use(VueParallaxJs)
			

Usage ~

<h1 v-parallax="0.2">vue-parallax-js</h1>

0 will appear static on the page (no effect)
1 will move along the page at the same speed as the scrolling
-1 will move upwards at the same speed as the scrolling
			

Options ~

when adding vue-parallax-js to Vue you can pass some options

Vue.use(VueParallaxJs, {option: value})
			

Modifiers ~

when using the v-parallax directive you can also pass some modifiers to configure the instance of vue-parallax-js

<h1 v-parallax.modifier="0.2">vue-parallax-js</h1>
// notice the . between "v-parallax" and the modifier