vue-parallax-js
Tiny vue component that adds a directive for parallax effect on elements.
- no dependencies
- lightweight
- 1.3k gzip
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
when everything is setup you can use the directive like this:
<h1 v-parallax="0.2">vue-parallax-js</h1>
Options
Vue.use(VueParallaxJs, options)
const options = {
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 */
}
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>
| Modifier | Description |
|---|---|
| horizontal | horizontal based parallax |
| centerX | will add transform: translateX(-50%) along with the parallax positioning |
| absY | uses the window height instead of the element height for the calculations |
84 Nov 30, 2022
41 Sep 27, 2022
0 Dec 16, 2019
2k Dec 31, 2022
17 Jul 15, 2022
2 Jun 30, 2021
3 Aug 31, 2022
284 Dec 22, 2022
4 Dec 25, 2022
41 Feb 4, 2022
836 Dec 20, 2022
628 Dec 20, 2022
0 Jan 31, 2019
743 Dec 28, 2022
112 Dec 27, 2022
3 Dec 7, 2022
42 Dec 11, 2022
2.3k Jan 8, 2023