vue-mouse-parallax
An easy to use Mouse Parallax Component - Made with Vue.js
Demo
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)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>Usage
In order for the effect to work, the <parallax-element /> should be contained within <parallax-container />
Options can then be passed to <parallax-element /> 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' |
Todo
- Nested parallax-elements
- Better demo page
- Default values
- Value types
