@ryova/parallax_component

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