Repository files navigation

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

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

or includebuild/bundle.js.

# in your componentcomponents:"parallax":require("vue-parallax")# or, when using bundle.jscomponents:"parallax":window.vueComps.parallax

<parallaxsrc="path/to/img"><divslot="loading">loading...</div><div>content</div></parallax>

content will be shown after loading

For examples seedev/.

Currentlybuble is injectingstrict mode in all processed js files. The down to ES5 compiled component containswith, which is forbidden instrict mode.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:

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

Name | description---:| --- | ---| ---image-loaded | will be called when the image is loadedloaded | will be called when the first calculation - after a image is loaded - is finished

• 2.1.3
  bugfix in portrait mode

• 2.1.2
  now working on devices in portrait mode

• 2.1.1
  bugfix

• 2.1.0
  changed way the picture moves, now in line with other parallax implementations

• 2.0.0
  now compatible with vue 2.0.0

• 1.0.0
  some cleaning
  added unit tests
  now working with firefox

Clone repository.

npm installnpm run dev

Browse tohttp://localhost:8080/.

Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.