Tiny vue component that adds a directive for parallax effect on elements.
- no dependencies
- lightweight
- 1.3k gzip
npm install --save vue-parallax-js# or use yarnyarn add vue-parallax-js
in your main JavaScript file
// import Vue and vue-parallax-jsimportVuefrom'vue'importVueParallaxJsfrom'vue-parallax-js'// add vue-parallax-js to vueVue.use(VueParallaxJs)
when everything is setup you can use the directive like this:
<h1v-parallax="0.2">vue-parallax-js</h1>
Vue.use(VueParallaxJs, options)
constoptions={minWidth:Number,/* minumum window width for parallax to take effect */className:String,/* this class gets added to all elements that are being animated, by default none */container:String,/* element that actually scrolls, by default it's window */}when using thev-parallax directive you can also pass some modifiers to configure the instance of vue-parallax-js
<h1v-parallax.modifier="0.2">vue-parallax-js</h1>
| Modifier | Description |
|---|
| horizontal | horizontal based parallax |
| centerX | will addtransform: translateX(-50%) along with the parallax positioning |
| absY | uses the window height instead of the element height for the calculations |