a basic slide transition on scroll for vue
npm install --save-dev vue-slide-onscroll
import Vue from 'vue'
import SlideOnScroll from 'vue-slide-onscroll'
Vue.component('v-slide', SlideOnScroll)
or
<template>
<div id="app">
<v-slide initPos="leftToRight" posValue="10"
<p>...</p>
<div>...</div>
</v-slide>
</div>
</template>
<script>
import { SlideOnScroll } from 'vue-slide-onscroll'
export default {
components: {
'v-slide': SlideOnScroll
},
data: function() {
return {
....
....
}
}
};
</script>
<v-slide initPos="left-to-right" >
<div>...</div>
</v-slide>
<v-slide initPos="left-to-right" posValue="15" >
<div>...</div>
</v-slide>
<v-slide initPos="left-to-right" posValue="12" duration="1" >
<div>...</div>
</v-slide>
Props | Type | Values | Default |
---|---|---|---|
initPos | String | left-to-right right-to-left top-to-bottom bottom-to-top |
|
posValue | Number | 0 - 20 | 12 |
duration | String | 0.5 / 1 | 0.5 |
vue-slide-onscroll is an open source project and release under the MIT License.
Copyright (C) 2019 Lisandro A. Bitoy.