Vue-parallax NPM

vue-parallax

Scrolls a image slower than the window to create a neat optical effect.

npm install --save-dev vue-parallax@1

or include build/bundle.js.

# 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 dev/.

If your assets are organized by webpack, this should work:

<parallax src=require('../assets/your-image.jpg')></parallax>

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.

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

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