https://github.com/vue-comps/vue-parallax
Scrolls a image slower than the window to create a neat optical effect.
https://github.com/vue-comps/vue-parallax
Last synced: 3 months ago
JSON representation
Scrolls a image slower than the window to create a neat optical effect.
- Host: GitHub
- URL: https://github.com/vue-comps/vue-parallax
- Owner: vue-comps
- Created: 2016-04-12T00:20:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-29T10:40:37.000Z (about 9 years ago)
- Last Synced: 2025-06-25T21:52:22.335Z (6 months ago)
- Language: Vue
- Size: 495 KB
- Stars: 84
- Watchers: 4
- Forks: 14
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-cn - vue-parallax
- awesome-vue - vue-parallax - Scrolls an image slower than the window to create a neat optical effect. (Components & Libraries / UI Components)
- awesome - vue-parallax - 整洁的视觉效果 (UI组件)
- awesome-vue-refactor - vue-parallax ★3
- awesome-vue-zh - Vue视差 - 滚动比窗口慢的图像以创建整洁的光学效果. (UI组件 / 视差)
- awesome-vue - vue-parallax - Scrolls a image slower than the window to create a neat optical effect. ` 📝 5 years ago` (UI Components [🔝](#readme))
- awesome-vue - vue-parallax - comps/vue-parallax?style=social) - 整洁的视觉效果 (UI组件)
- awesome-github-vue - vue-parallax - 整洁的视觉效果 (UI组件)
- awesome-github-vue - vue-parallax - 整洁的视觉效果 (UI组件)
- awesome-vue - vue-parallax ★66 - Scrolls an image slower than the window to create a neat optical effect. (UI Components / Parallax)
- awesome-vuejs - vue-parallax ★3
- awesome-vue - vue-parallax - Scrolls an image slower than the window to create a neat optical effect. (UI Components / Parallax)
README
# vue-parallax
Scrolls a image slower than the window to create a neat optical effect.
### [Demo](https://vue-comps.github.io/vue-parallax)
# Install
```sh
npm install --save-dev vue-parallax
// vue@1.0
npm install --save-dev vue-parallax@1
```
or include `build/bundle.js`.
## Usage
```coffee
# in your component
components:
"parallax": require("vue-parallax")
# or, when using bundle.js
components:
"parallax": window.vueComps.parallax
```
```html
loading...
content
```
content will be shown after loading
For examples see [`dev/`](dev/).
### ERROR: Module build failed: SyntaxError: 'with' in strict mode
Currently [buble](https://gitlab.com/Rich-Harris/buble) is injecting `strict` mode in all processed js files. The down to ES5 compiled component contains `with`, which is forbidden in `strict` 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.
#### Webpack
If your assets are organized by webpack, this should work:
```html
```
#### 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
- 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
# Development
Clone repository.
```sh
npm install
npm run dev
```
Browse to `http://localhost:8080/`.
## License
Copyright (c) 2016 Paul Pflugradt
Licensed under the MIT license.