vue-scroll-show
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 |
Dependencies
@babel/core: ^7.0.0@babel/plugin-transform-runtime: ^7.0.0@babel/preset-env: ^7.0.0@babel/runtime: ^7.0.0babel-loader: ^8.0.2rimraf: ^2.6.2vue: ^2.5.6vue-html-loader: ^1.2.4vue-loader: ^15.4.2vue-style-loader: ^4.1.2vue-template-compiler: ^2.5.6webpack: 4.20.2webpack-cli: ^3.1.2webpack-merge: ^4.1.1