Dynamic Marquee Effect In Vue

Install & Download:

# Yarn
$ yarn add vue-dynamic-marquee
# NPM
$ npm i vue-dynamic-marquee

Description:

A Vue.js component to implement a dynamic, configurable marquee effect on your app.

Features:

Supports horizontal and vertical scrolling
Autoplay and pause on hover.
Infinite loop or not.

How to use it:

1. Import the Dynamic Marquee component.

import DynamicMarquee from ‘vue-dynamic-marquee’;

2. Register the component.

Vue.component(‘dynamic-marquee’, DynamicMarquee);

3. Add the <dynamic-marquee> component to the template.

<dynamic-marquee>
  Any Marquee Content Here
</dynamic-marquee>

4. Available component props.

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,
},