vue-mouse-parallax

vue-mouse-parallax

An easy to use Mouse Parallax Component - Made with Vue.js

Demo

vuejs mouse parallax

Installation

npm install --save vue-mouse-parallax

Default import

Install all the components:

import Vue from 'vue'
import VueMouseParallax from 'vue-mouse-parallax'

Vue.use(VueMouseParallax)

Use specific components:

import Vue from 'vue'
import { ParallaxContainer, ParallaxElement } from 'vue-mouse-parallax'

Vue.component('parallax-container', ParallaxContainer)
Vue.component('parallax-element', ParallaxElement)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Distribution import

Install all the components:

import 'vue-mouse-parallax/dist/vue-mouse-parallax.css'
import VueMouseParallax from 'vue-mouse-parallax/dist/vue-mouse-parallax.common'

Vue.use(VueMouseParallax)

Use specific components:

import 'vue-mouse-parallax/dist/vue-mouse-parallax.css'
import { ParallaxContainer, ParallaxElement } from 'vue-mouse-parallax/dist/vue-mouse-parallax.common'

Vue.component('parallax-container', ParallaxContainer)
Vue.component('parallax-element', ParallaxElement)

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

<link rel="stylesheet" href="vue-mouse-parallax/dist/vue-mouse-parallax.css"/>

<script src="vue.js"></script>
<script src="vue-mouse-parallax/dist/vue-mouse-parallax.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

Vue.use(VueMouseParallax)

Source import

Install all the components:

import Vue from 'vue'
import VueMouseParallax from 'vue-mouse-parallax/src'

Vue.use(VueMouseParallax)

Use specific components:

import Vue from 'vue'
import { ParallaxContainer, ParallaxElement } from 'vue-mouse-parallax/src'

Vue.component('parallax-container', ParallaxContainer)
Vue.component('parallax-element', ParallaxElement)

⚠️ You need to configure your bundler to compile .vue files. More info in the official documentation.

Usage

In order for the effect to work, the should be contained within

Options can then be passed to like so :

// App.vue

<parallax-container>

    <parallax-element :parallaxStrength="-5" :type="'translation'">
        <h2>Put your content here</h2>
     </parallax-element>

</parallax-container>

Props

Prop	Type	Default Value	Description
parallaxStrength	Number	10	Strength of the Parallax Effect
type	String	'translation'	'translation' - 'rotation' - 'depth'

License

MIT