EvodiaAut / Vue Marquee Text Component
Licence: mit
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Marquee Text Component
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+11.95%)
Mutual labels: component, vue-component, vuejs2, vue2
Vue Typer
Vue component that simulates a user typing, selecting, and erasing text.
Stars: ✭ 691 (+205.75%)
Mutual labels: component, vue-component, vue2
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+2242.04%)
Mutual labels: component, vuejs2, vue2
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-73.01%)
Mutual labels: component, vuejs2, vue2
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+96.02%)
Mutual labels: vue-component, vuejs2, vue2
Vue2 Calendar
vue 2.x calendar component
Stars: ✭ 477 (+111.06%)
Mutual labels: vue-component, vuejs2, vue2
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-84.96%)
Mutual labels: component, vuejs2, vue2
Vue Truncate Collapsed
A simple component that truncates your text and adds a 'Read More/Show Less' clickable.
Stars: ✭ 98 (-56.64%)
Mutual labels: component, vue-component, vue2
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (-58.85%)
Mutual labels: vue-component, vuejs2, vue2
Xcui
🍴 A Vue.js 2.x desktop components colletion
Stars: ✭ 88 (-61.06%)
Mutual labels: vue-component, vuejs2, vue2
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+1681.42%)
Mutual labels: vue-component, vuejs2, vue2
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+835.84%)
Mutual labels: vue-component, vuejs2, vue2
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+8789.38%)
Mutual labels: vue-component, vuejs2, vue2
Vue Star Rating
⭐️ A simple, highly customisable star rating component for Vue 2.x. / 3.x
Stars: ✭ 509 (+125.22%)
Mutual labels: vue-component, vuejs2, vue2
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-71.68%)
Mutual labels: vuejs2, vue2, vue-component
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+2941.59%)
Mutual labels: vue-component, vuejs2, vue2
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (+439.82%)
Mutual labels: vue-component, vuejs2, vue2
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+5241.59%)
Mutual labels: vue-component, vuejs2, vue2
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (-4.42%)
Mutual labels: component, vuejs2, vue2
vue-marquee-text-component
[CSS GPU Animation] Marquee Text for vuejs
Demo
Install
npm install vue-marquee-text-component
or yarn add vue-marquee-text-component
Usage
The most common use case is to register the component globally.
// in your main.js or similar file
import Vue from 'vue'
import MarqueeText from 'vue-marquee-text-component'
Vue.component('marquee-text', MarqueeText)
Alternatively you can do this to register the components:
// HelloWorld.vue
import MarqueeText from 'vue-marquee-text-component'
export default {
name: 'HelloWorld',
components: {
MarqueeText
}
}
On your page you can now use html like this:
<!-- simple marquee text -->
<marquee-text>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
</marquee-text>
<!-- short text need more duplicates -->
<marquee-text :repeat="10">
Short text =(
</marquee-text>
<!-- slow duration -->
<marquee-text :duration="30">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
</marquee-text>
Props
Prop | Type | Default | Description |
---|---|---|---|
duration | Number | 15 | Animation Duration |
repeat | Number | 2 | Number of repeat the Slot (It's important for to short content) |
paused | Boolean | false | The property specifies whether the animation is running or paused |
reverse | Boolean | false | Set animation-direction to reverse |
Important information for dynamic content
If you change the content you need reload the component. For this use property :key
see more
<!-- parse a unique key for reload the component -->
<marquee-text :key="currentTrack.id">
{{ currentTrack.title }}
</marquee-text>
Build Setup
yarn install
yarn run serve
yarn run build
yarn run lint
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].