High Performance Marquee Text For Vue.js

High Performance Marquee Text For Vue.js

Makes use of CSS GPU animation to create a traditional 'Marquee' effect for text.

vue-marquee-text-component

[CSS GPU Animation] Marquee Text for vuejs

npm license npm

Demo

Demo here

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

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

Github Repository

Tags: #Vue.js