Morioh
Login
Joshua Rowe

Joshua Rowe

4 years ago

High Performance Marquee Text For Vue.js

Description:

[CSS GPU Animation] Marquee Text for vuejs

Install & Download:

Yarn

$ yarn add vue-marquee-text-component

NPM

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

How to use it:

  1. 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>

Important information for dynamic content

If you change the content you need reload the component. For this use property :key

<!-- parse a unique key for reload the component  -->
<marquee-text :key="currentTrack.id">
  {{ currentTrack.title }}
</marquee-text>

Download Details:

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

#vuejs #javascript #vue-js

High Performance Marquee Text For Vue.js
32.70 GEEK