VueTinyTyper - a vue component for creating a typing effect element.
Credits
This project is forked from https://github.com/lourenc/tinytyper . Some parts of the readme are also originally from above repository.
Why
This project was created because I was missing events in the non-vue version.
Demo
Full credits to https://github.com/lourenc/tinytyper
Installation
Library can be easily installed via either Yarn or NPM:
npm i vue-tinytyper --save
or
yarn add vue-tinytyper
Usage
Basic setup looks like this:
import VueTinytyper from 'vue-tinytyper';then
<vue-tinytyper text="Hello, please type this out."></vue-tinytyper>or
<vue-tinytyper>Hello, please type this out.</vue-tinytyper>Available props:
| Prop | Default | Type | Description |
|---|---|---|---|
text |
`` | String | The text to animate |
textSpeed |
95 |
Number | Defines text speed animation |
cursor |
▌ |
String | Defines current cursor symbol |
blinkSpeed |
0.05 |
Number | Defines blink speed of the cursor |
containerClass |
'tiny-typer-container' | String | A CSS class for the container element |
cursorClass |
tiny-typer-cursor |
String | A CSS class for cursor element |
textClass |
tiny-typer-text |
String | A CSS class for text element |
staticCursor |
false |
Boolean | Makes cursor static (disables blinking) |
staticText |
false |
Boolean | Makes text static (disables animation) |
customEvents |
{} |
Object | Pass custom "on-character" events. Example: { '!': 'my-event' }, where the event 'my-event' will be triggered every time the current animation character matches the object key, eg. "!". |
Available events
| Eventname | Trigger | Payload |
|---|---|---|
animation-finished |
When animation doesn't have any more characters to animate | None |
Contributions
Contributions are welcome. Feel free to create issues
License
MIT