jsnanigans / vue-parallax-js

Tiny vue component that adds a directive for parallax effect on elements.

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