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