Awesome
Vue Scroll Show
Showing the element if the user reached it after scroll
Installation
npm i --save-dev vue-scroll-show
import VueScrollShow from 'vue-scroll-show'
Vue.use(VueScrollShow)
SSR (Nuxt.js)
import VueScrollShow from 'vue-scroll-show/dist/ssr.index'
Vue.use(VueScrollShow)
Usage
<element v-scroll-show></element>
or with options
<div id='event'>
<span v-scroll-show='{active: "show fadeIn", delay: 500, parentId: "event"}'>Show one from parentId</span>
<span v-scroll-show='{active: "show fadeIn", delay: 1000, parentId: "event"}'>Show two from parentId</span>
</div>
<span v-scroll-show='{active: "show fadeIn"}'>Show three without parentId</span>
<span v-scroll-show='{active: "show fadeIn", offset: 500}'>Show four with offset 500</span>
Directive options
| Option | Description |
|---|---|
| active | Add classes if element in display area |
| delay | Timeout to add classes to element |
| offset | Screen offset to add class to element |
| parentId | Id parent element for starting add classes to directive elements |