Parallax Component

Simple use vue-component decorator / container for parallax effect.

Install & Registration

  npm i @ryova/parallax_component -s

Local registration:

  import Parallax from '@ryova/parallax_component'

Dynamic import:

components: {
  Parallax: () => import('@ryova/parallax_component')
}

Usage & Props

<div class="container">
  <parallax :Options="{ OpacityFade: true, OpacityFadeOffset: 150 }">
    <span class="item"><span>
  </parallax>
  //or
  <parallax :OpacityFade="true" :OpacityFadeOffset="150">
    <span class="item"><span>
  </parallax>
</div>

Props values

| Prop | Default value | Type | | - | - | - | | Options| null | Object | | Multiplier| 0.25 | Number | | Direction | down | String | | OpacityFade | false | Boolean | | OpacityFadeOffset | 0 | Number |

Options Prop

Options object is just a simple props object. For comfortable use.

  const S = this.Options?.Multiplier ?? this.Multiplier