vue-parallax
Scrolls a image slower than the window to create a neat optical effect.
Demo
Install
npm install --save-dev vue-parallax@1
or include build/bundle.js
.
Usage
# in your component components: "parallax": require"vue-parallax"# or, when using bundle.js components: "parallax": windowvueCompsparallax
loading... content
content will be shown after loading
For examples see dev/
.
Webpack
If your assets are organized by webpack, this should work:
Props
Name | type | default | description |
---|---|---|---|
src | String | - | (required) path to image |
height | Number | 500 | height of the parallax element |
speed | Number | 0.2 | 0.0 means the image will appear fixed in place, and 1.0 the image will flow at the same speed as the page content. |
Events
Name | description |
---|---|
image-loaded | will be called when the image is loaded |
loaded | will be called when the first calculation - after a image is loaded - is finished |
Changelog
-
1.1.1
bugfix in portrait mode -
1.1.0
changed way the picture moves, now in line with other parallax implementations
now working on devices in portrait mode -
1.0.0
some cleaning
added unit tests
now working with firefox
Development
Clone repository.
npm installnpm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.