Dynamic Select is a Vue.js component to implement a configurable dynamic marquee effect on your application.
marquee effect in jquery, dynamic marquee in html, continuous marquee jquery with demo, vue npm dynamic marquee, javascript marquee library, javascript marquee scroll vertical
How to make use of it:
Install and download:
# Yarn $ yarn add vue-dynamic-marquee # NPM $ npm i vue-dynamic-marquee
1. Import the dynamic selection component.
import DynamicMarquee from ‘vue-dynamic-marquee’;
2. Register the component.
Vue.component(‘dynamic-marquee’, DynamicMarquee);
3. Add a <dynamic-marquee> component to the template.
<dynamic-marquee> Any Marquee Content Here </dynamic-marquee>
4. Component props available.
speed: {
type: Object,
default() {
return {
type: 'pps',
number: 100,
};
},
validator(val) {
return (
val.type &&
['pps', 'duration'].includes(val.type) &&
val.number &&
!isNaN(val.number)
);
},
},
repeat: {
type: Boolean,
default: true,
},
repeatMargin: {
type: Number,
default: 10,
},
hoverPause: {
type: Boolean,
default: true,
},
pause: {
type: Boolean,
default: false,
},
direction: {
type: String,
default: 'column',
validator(val) {
return ['column', 'row'].includes(val);
},
},
reverse: {
type: Boolean,
default: false,
},Props
| Prop | Type | Default | Explanation |
|---|---|---|---|
| direction | ‘row’|’column’ | ‘column’ | animation direction |
| reverse | boolean | false | By default the slot will translate according to document flow – top to bottom for {direction: ‘column’} and and for {direction: ‘row’} in accordance to ltr-rtl direction style of the wrapper. This behaviour can be reversed with this prop. |
| repeat | boolean | true | If true the slot will repeat itself so as not to leave whitespace as the slot is finishing to translate out of the wrapper. The component will compute the number of times to repeat the slot in accordance with the repeatMargin prop. |
| repeatMargin | number | 10 | Pixels between repeated slots. |
| speed | {type: ‘pps’|’duration’, number: number} | {type: ‘pps’, number: 100} | There are two ways to define the translation speed. When choosing ‘pps’, ‘number’ is number of pixels per second. When choosing ‘duration’, ‘number’ is the number of milliseconds in which the slot will translate from the begining to the end of the wrapper element. |
| hoverPause | boolean | true | Should animation pause upon hovering over wrapper element. |
| pause | boolean | false | Use to programmaticlly pause animation. |
Vue Dynamic Marquee Effect Plugin/Github, marquee animation js
See Demo And Download
Official Website(YishaiBerg): Click Here
This superior jQuery/javascript plugin is developed by YishaiBerg. For extra Advanced Usages, please go to the official website.
