Scrolls a image slower than the window to create a neat optical effect.
npm install --save-dev vue-parallax // email@example.com npm install --save-dev vue-parallax@1
# in your component components: "parallax": require("vue-parallax") # or, when using bundle.js components: "parallax": window.vueComps.parallax
<parallax src="path/to/img"> <div slot="loading">loading...</div> <div>content</div> </parallax>
content will be shown after loading
For examples see
ERROR: Module build failed: SyntaxError: 'with' in strict mode
Currently buble is injecting
strict mode in all processed js files. The down to ES5 compiled component contains
with, which is forbidden in
Buble is used, for example, in rollup, which is used in laravel.
If you are running in this problem, make sure to exclude this component from processing with buble.
If your assets are organized by webpack, this should work:
|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.|
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
bugfix in portrait mode
now working on devices in portrait mode
changed way the picture moves, now in line with other parallax implementations
now compatible with vue 2.0.0
added unit tests
now working with firefox
npm install npm run dev
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.