vue-parallax

Scrolls a image slower than the window to create a neat optical effect
2,516 82
vue component parallax
Install
npm install vue-parallax@2.1.3
Latest Version:2.1.3
Vue:2
Older releases:1
License:MIT
Last Updated:Oct 29, 2016
Links: GitHub  ·  npm
Maintainer: paulpflug

vue-parallax

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

Demo

Install

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

or include build/bundle.js.

Usage

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

Webpack

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

<parallax src=require('../assets/your-image.jpg')></parallax>
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

  • 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

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Related Packages

vue-parallax-view

Create a composite control that displays different images that react to the mous...

1,090 10
parallax vue
vue-parallax-js

Tiny vue component that adds a directive for parallax effect on elements.

40,964 117
parallax vue vue parallax vue-component
@lucien144/vue3-parallaxy

Lightweight yet powerful parallax component for Vue3.

14,889 27
component parallax vue vue3
vue-rellax

A plugin of Vue that adds a directive for parallax effect by rellax.js.

7,459 42
parallax vue rellax vue plugin
vue-flux

Vue image and other resources slider

25,152 551
parallax vue carousel image slider

Version History

Version Released Vue License
2.1.3 ^2.0.2 MIT
2.1.2 ^2.0.2 MIT
2.1.1 ^2.0.2 MIT
2.1.0 ^2.0.2 MIT
2.0.0 ^2.0.2 MIT