Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 (almost 9 years ago)
Default Branch: master
Last Pushed: 2016-10-29T10:40:37.000Z (about 8 years ago)
Last Synced: 2024-09-19T10:18:10.604Z (4 months ago)
Language: Vue
Size: 495 KB
Stars: 86
Watchers: 5
Forks: 14
Open Issues: 2
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome-vue-cn - vue-parallax
awesome-vue - vue-parallax - comps/vue-parallax?style=social) - 整洁的视觉效果 (UI组件)
awesome-github-vue - vue-parallax - 整洁的视觉效果 (UI组件)
awesome - vue-parallax - 整洁的视觉效果 (UI组件)
awesome-github-vue - vue-parallax - 整洁的视觉效果 (UI组件)

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
// [email protected]
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

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/`.