BETA
Sort by:
Buy us a coffeePsst! Honestly, We have NO idea how much to ask, but a cup of Coffee would be nice!

vue-parallaxy

🌌 Vue.js component for parallax image scroll effects


586
20
12 days ago
5176
GitHub

vue-parallaxy

npm version vue2 license

ko-fi

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

Demo

Demo here

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.

// Image.vue

<template>
  <parallax>
    <img src="path/cool-background-image.jpg" alt="very cool bg">
  </parallax>
</template>

<script>
  import Parallax from 'vue-parallaxy'
  export default {
    components: {
      Parallax
    }
  }
</script>

Props

PropTypeDefault ValueDescription
parallaxBooleantrueActivates parallax effect
speedFactorNumber0.15factor on how strong the effect is
directionString'up'Either 'up' or 'down', determines scroll direction of image
fixedBooleanfalseOther parallax effect. Image is fixed in position
sectionHeightNumber70section height for mobile
breakpointString'(min-width: 968px)'Media query for mobile deactivation
sectionClassString'Masthead'CSS class of the outer section tag
containerClassString'Masthead__image'CSS class of the container holding the image
parallaxClassString'is-parallax'Modifier class for the parallax effect
fixedClassString'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

# 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 and docs for 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.