Description:
Makes use of CSS GPU animation to create a traditional ‘Marquee’ effect for text.
How to use it:
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. Available component props.
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
}Preview:
Changelog:
v2.0.1 (09/29/2021)
- Vue3 Support
v1.0.2 (10/01/2020)
- Listening to Events
- Add property reverse and set animation-direction to reverse
- Property repeat set min to 1
Download Details:
Author: EvodiaAut
Live Demo: https://evodiaaut.github.io/vue-marquee-text-component/
Download Link: https://github.com/EvodiaAut/vue-marquee-text-component/archive/master.zip
Official Website: https://github.com/EvodiaAut/vue-marquee-text-component
Install & Download:
# Yarn
$ yarn add vue-marquee-text-component
# NPM
$ npm install vue-marquee-text-component --save