https://github.com/jsnanigans/vue-parallax-js
Tiny vue component that adds a directive for parallax effect on elements.
https://github.com/jsnanigans/vue-parallax-js
parallax parallax-javascript-library vue vue-component vue-components vue-parallax-js vuejs vuejs-components
Last synced: 5 months ago
JSON representation
Tiny vue component that adds a directive for parallax effect on elements.
- Host: GitHub
- URL: https://github.com/jsnanigans/vue-parallax-js
- Owner: jsnanigans
- Created: 2017-02-18T14:50:49.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T05:20:23.000Z (over 4 years ago)
- Last Synced: 2025-10-05T03:52:19.351Z (9 months ago)
- Topics: parallax, parallax-javascript-library, vue, vue-component, vue-components, vue-parallax-js, vuejs, vuejs-components
- Language: JavaScript
- Homepage:
- Size: 557 KB
- Stars: 118
- Watchers: 4
- Forks: 19
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vie-parallax-js ★51 - Tiny vue component that adds a directive for parallax effect on elements. (UI Components / Parallax)
- awesome-vue - vue-parallax-js - Tiny vue component that adds a directive for parallax effect on elements. (UI Components / Parallax)
- awesome-vue - vue-parallax-js - Tiny vue component that adds a directive for parallax effect on elements. (Components & Libraries / UI Components)
- awesome-vue - vue-parallax-js - Tiny vue component that adds a directive for parallax effect on elements. ` 📝 9 months ago` (UI Components [🔝](#readme))
README
# vue-parallax-js
Tiny vue component that adds a directive for parallax effect on elements.
- no dependencies
- lightweight
- 1.3k gzip
## Setup
```bash
npm install --save vue-parallax-js
# or use yarn
yarn add vue-parallax-js
```
in your main JavaScript file
```javascript
// 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:
```vue
vue-parallax-js
```
## Options
```vue
Vue.use(VueParallaxJs, options)
```
```javascript
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
```vue
vue-parallax-js
```
| 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 |