https://github.com/EvodiaAut/vue-marquee-text-component
[CSS GPU Animation] Marquee Text for vuejs
https://github.com/EvodiaAut/vue-marquee-text-component
component javascript marqueetext vue vue-component vue2 vuejs vuejs2
Last synced: about 1 year ago
JSON representation
[CSS GPU Animation] Marquee Text for vuejs
- Host: GitHub
- URL: https://github.com/EvodiaAut/vue-marquee-text-component
- Owner: EvodiaAut
- License: mit
- Created: 2018-10-20T13:14:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-09T10:55:00.000Z (over 2 years ago)
- Last Synced: 2025-03-25T12:11:09.882Z (about 1 year ago)
- Topics: component, javascript, marqueetext, vue, vue-component, vue2, vuejs, vuejs2
- Language: Vue
- Homepage: https://evodiaaut.github.io/vue-marquee-text-component/
- Size: 2.1 MB
- Stars: 474
- Watchers: 9
- Forks: 44
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# vue-marquee-text-component
> [[CSS GPU Animation](https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/)] Marquee Text for vuejs
[](https://www.npmjs.com/package/vue-marquee-text-component)
[](https://github.com/EvodiaAut/vue-marquee-text-component/blob/master/LICENSE.md)
[](https://www.npmjs.com/package/vue-marquee-text-component)
## Demo
[Demo here](https://evodiaaut.github.io/vue-marquee-text-component/)
## Install
[Vue 3 (master)](https://github.com/EvodiaAut/vue-marquee-text-component) | [Vue 2 (v1)](https://github.com/EvodiaAut/vue-marquee-text-component/tree/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.
```js
// 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:
```js
// 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:
```html
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
Short text =(
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
```
## 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](https://vuejs.org/v2/api/#key)
```html
{{ currentTrack.title }}
```
## Build Setup
``` bash
yarn install
yarn run serve
yarn run build
yarn run lint
```