Press "Enter" to skip to content

Smooth CSS GPU Animation Marquee Text for Vuejs

Vue selection text component uses CSS GPU animations to create a traditional “Marquee” text effect for vuejs.

vue dynamic marquee, vuetify marquee, marquee css, marquee html, nuxt marquee, vue marquee component, scrolling text css, smooth marquee css

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-marquee-text-component

# NPM
$ npm install vue-marquee-text-component --save

1. Import and register the component.

import Vue from 'vue'
import MarqueeText from 'vue-marquee-text-component'
Vue.component('marquee-text', MarqueeText);
// or
import MarqueeText from 'vue-marquee-text-component'
export default {
  name: 'myApp',
  components: {
    MarqueeText
  }
}

2. Add your text to the <marquee-text> component.

<marquee-text>
  Your Text Here
</marquee-text>

3. Component props available.

duration: {
  type: Number,
  default: 15
},
repeat: {
  type: Number,
  default: 2,
  validator(val) {
    return val > 0
  }
},
paused: {
  type: Boolean,
  default: false
},
reverse: {
  type: Boolean,
  default: false
}

Props

PropTypeDefaultDescription
durationNumber15Animation Duration
repeatNumber2Number of repeat the Slot (It’s important for to short content)
pausedBooleanfalseThe property specifies whether the animation is running or paused
reverseBooleanfalseSet animation direction to reverse

High Performance Marquee Text For Vue.js, vue marquee text component Plugin/Github


See Demo And Download

Official Website(EvodiaAut): Click Here

This superior jQuery/javascript plugin is developed by EvodiaAut. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.