vue-sf-parallax
v1.0.0
Published
An easy to use Mouse Parallax Component - Made with Vue.js
Downloads
18
Readme
vue-sf-parallax (vue-mouse-parallax s3rg1s fork)
An easy to use Mouse Parallax Component - Made with Vue.js
Demo
Installation
npm install --save vue-sf-parallax
Default import
Install all the components:
import Vue from 'vue'
import VueMouseParallax from 'vue-sf-parallax'
Vue.use(VueMouseParallax)
Use specific components:
import Vue from 'vue'
import { ParallaxContainer, ParallaxElement } from 'vue-sf-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.
Browser
<link rel="stylesheet" href="vue-sf-parallax/dist/vue-mouse-parallax.css"/>
<script src="vue.js"></script>
<script src="vue-sf-parallax/dist/vue-mouse-parallax.browser.js"></script>
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' |