Dynamic Marquee Effect In Vue

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

Preview:

Dynamic Marquee Effect In Vue

Download Details:

Author: YishaiBerg

Live Demo: https://yishaiberg.github.io/dynamic-marquee-playground/

Download Link: https://github.com/YishaiBerg/vue-dynamic-marquee/archive/master.zip

Official Website: https://github.com/YishaiBerg/vue-dynamic-marquee

Install & Download:

# Yarn
$ yarn add vue-dynamic-marquee

# NPM
$ npm i vue-dynamic-marquee

You Might Be Interested In:

Add Comment