https://github.com/apertureless/vue-parallax

🌌 Vue.js component for parallax image scroll effects
https://github.com/apertureless/vue-parallax

fast image parallax scrolling vue vuejs vuejs2

Last synced: 7 days ago
JSON representation

🌌 Vue.js component for parallax image scroll effects

• Host: GitHub
• URL: https://github.com/apertureless/vue-parallax
• Owner: apertureless
• License: mit
• Created: 2016-12-18T15:21:24.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T23:14:15.000Z (about 2 years ago)
• Last Synced: 2024-10-29T17:14:03.680Z (3 months ago)
• Topics: fast, image, parallax, scrolling, vue, vuejs, vuejs2
• Language: JavaScript
• Homepage:
• Size: 1.01 MB
• Stars: 638
• Watchers: 10
• Forks: 88
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-vue - vue-parallax - parallax?style=social) - 快速60fps视差滚动效果组件 (实用库)
• awesome-github-vue - vue-parallax - 快速60fps视差滚动效果组件 (实用库)
• awesome-github-vue - vue-parallax - 快速60fps视差滚动效果组件 (实用库)
• awesome - vue-parallax - 快速60fps视差滚动效果组件 (实用库)

README

        
# vue-parallaxy

[![npm version](https://badge.fury.io/js/vue-parallaxy.svg)](https://badge.fury.io/js/vue-parallaxy)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-parallax/blob/master/LICENSE.txt)

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)

Is a compontent for fast 60fps parallax scroll effects in vue 2.

## Demo

[Demo here](https://apertureless.github.io/vue-parallax/)

## Install

`npm install vue-parallaxy` or `yarn add vue-parallaxy`

## Usage

*vue-parallax* works with slots. So you can pass an image or even srcsets for better mobile experiences.

```html

// Image.vue

  

    

  

  import Parallax from 'vue-parallaxy'

  export default {

    components: {

      Parallax

    }

  }

```

## Props

| Prop   |      Type      |  Default Value | Description

|----------|:-------------:|------|------|

| parallax |  Boolean | true | Activates parallax effect |

| speedFactor |  Number   | 0.15 | factor on how strong the effect is|

| direction |  String   | 'up' | Either 'up' or 'down', determines scroll direction of image |

| fixed | Boolean | false | Other parallax effect. Image is fixed in position |

| sectionHeight | Number | 70 | section height for mobile |

| breakpoint | String | '(min-width: 968px)' | Media query for mobile deactivation |

| sectionClass | String | 'Masthead' | CSS class of the outer section tag |

| containerClass | String | 'Masthead__image' | CSS class of the container holding the  image |

| parallaxClass | String | 'is-parallax' | Modifier class for the parallax effect |

| fixedClass | String | 'is-fixed' | Modifier class for the fixed parallax effect |

## Customizing

You can change some of the behavior by changing the css classes. To be more clean, you can change them over the props. No need to overwrite or `!important` the existing classes.

## Build Setup

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

# run unit tests

npm run unit

# run all tests

npm test

```

For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## Contributing

1. Fork it ( https://github.com/apertureless/vue-parallax/fork )

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create a new Pull Request

## License

This software is distributed under [MIT license](LICENSE.txt).