Is a compontent for fast 60fps parallax scroll effects in vue 2.
npm install vue-parallax or yarn add vue-parallax
vue-parallax works with slots. So you can pass an image or even srcsets for better mobile experiences.
// Image.vue <template> <parallax> <img src="path/cool-background-image.jpg" alt="very cool bg"> </parallax> </template> <script> import Parallax from 'vue-parallax' export default { components: { Parallax } } </script>| Prop | Type | Default Value | Description |
|---|---|---|---|
| parallax | Boolean | true | Activates parallax effect |
| speedFactor | Number | 0.15 | factor on how strong the effect is |
| fixed | Boolean | false | Other parallax effect. Image is fixed in position |
| sectionHeight | Number | 70 | section height for mobile |
| breakpoint | String | '(min-width: 968px)' | Media query for mobile deactivation |
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # run unit tests npm run unit # run all tests npm testFor detailed explanation on how things work, checkout the guide and docs for vue-loader.
- Fork it ( https://github.com/apertureless/vue-parallax/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
This software is distributed under MIT license.