vue-sf-parallax
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
Options can then be passed to
// 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
Dependencies
babel-core: ^6.0.0babel-eslint: ^7.1.1babel-loader: ^6.0.0babel-preset-es2015: ^6.14.0babel-preset-stage-0: ^6.16.0cross-env: ^3.1.3css-loader: ^0.26.1eslint: ^3.12.1eslint-config-standard: ^6.2.1eslint-loader: ^1.6.1eslint-plugin-html: ^1.6.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1extract-text-webpack-plugin: ^2.0.0-beta.4node-sass: ^4.0.0sass-loader: ^4.1.0vue-loader: ^10.0.0vue-template-compiler: ^2.1.6webpack: ^2.1.0-beta.28webpack-merge: ^1.1.2