Smooth Horizontal Scroller Component For Vue – Marquee

Description:

A smooth scroller component for Vue 3, inspired by the traditional <marquee /> element.

How to use it:

1. Install and import the vue-marquee component.

// globally
import { createApp } from "vue";
import Vue3Marquee from "vue3-marquee";
createApp(App).use(Vue3Marquee).mount("#app");

// locally
import Vue3Marquee from "vue3-marquee";
export default {
  components: {
    Vue3Marquee,
  },
};

2. Add content to the scroller.

<vue3-marquee>
  ... Any Content Here ...
</vue3-marquee>

3. Available component props.

direction: {
  type: String,
  required: false,
  default: "left",
  validator(value) {
    return ["left", "right"].includes(value);
  },
},
duration: {
  type: Number,
  required: false,
  default: 20,
},
delay: {
  type: Number,
  required: false,
  default: 0,
},
loop: {
  type: Number,
  required: false,
  default: 0,
},
clone: {
  type: Boolean,
  required: false,
  default: false,
},
gradient: {
  type: Boolean,
  required: false,
  default: false,
},
gradientColor: {
  type: Array,
  required: false,
  default: [255, 255, 255],
  validator: (value) => {
    if (value.length != 3) {
      return false;
    }
    if (typeof value[0] !== "number" || value[0] < 0 || value[0] > 255) {
      return false;
    }
    if (typeof value[1] !== "number" || value[1] < 0 || value[1] > 255) {
      return false;
    }
    if (typeof value[2] !== "number" || value[2] < 0 || value[2] > 255) {
      return false;
    }
    return true;
  },
},
gradientWidth: {
  type: [String, Number],
  required: false,
  default: 200,
},
pauseOnHover: {
  type: Boolean,
  required: false,
  default: false,
},
pauseOnClick: {
  type: Boolean,
  required: false,
  default: false,
},
options: {
  type: Object,
  required: false,
  default: {},
},

Preview:

Smooth Horizontal Scroller Component For Vue - Marquee

Changelog:

11/20/2021

  • hack fix for html element type

Download Details:

Author: megasanjay

Live Demo: https://vue3-marquee.vercel.app/examples.html#basic-example-with-text

Download Link: https://github.com/megasanjay/vue3-marquee/archive/refs/heads/main.zip

Official Website: https://github.com/megasanjay/vue3-marquee

Install & Download:

# Yarn
$ yarn add vue3-marquee

# NPM
$ npm i vue3-marquee

You Might Be Interested In:

Add Comment