Socket
Socket
Sign inDemoInstall

vue-marquee-text-component

Package Overview
Dependencies
22
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-marquee-text-component

[CSS GPU Animation] Marquee Text for vuejs


Version published
Maintainers
1
Weekly downloads
4,290
decreased by-6.72%

Weekly downloads

Readme

Source

vue-marquee-text-component

[CSS GPU Animation] Marquee Text for vuejs

npm license npm

Demo

Demo here

Install

Vue 3 (master) | Vue 2 (v1)

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

PropTypeDefaultDescription
durationNumber15Animation Duration
repeatNumber2Number of repeat the Slot (It's important for to short content)
pausedBooleanfalseThe property specifies whether the animation is running or paused
reverseBooleanfalseSet 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

Keywords

FAQs

Last updated on 29 Sep 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc