vue-parallaxy

    1.1.1 • Public • Published

    vue-parallaxy

    npm version vue2 license

    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

    Prop Type Default Value Description
    parallax Boolean true Activates parallax effect
    speedFactor Number 0.15 factor on how strong the effect is
    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

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

    Install

    npm i vue-parallaxy

    DownloadsWeekly Downloads

    11,662

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • apertureless