0.1.6 • Published 2 years ago
word-scr4mbler v0.1.6
vue-text-scramble-animation
Install
npm i vue-text-scramble-animationDemo
Quick Start
Install The package (check install) and import it as follows:
import WordScr4mbler from 'word-scr4mbler'You are now able to use it.
<template>
<WordScr4mbler />
</template>Props
| Prop | Type | Purpose | Default |
|---|---|---|---|
text | String | The Text to unscramble to | Word-Scr4mbler |
init | String | The Text we start from | Scra-mBlErWord |
switchSpeed | Number | Interval in ms of scramble | 50 |
unscrambleTime | Number | The time between scramblinf and finalizing stage | 5 |
scramble_character | String | A string of characters to which we can scramble | ABCDEFGHIJKLM NOPQRSTUVXYZ012345 6789#+;- |
animationType | String | Finalizing Stage unscramble from left to right ('linear') or random (random) | random |
Text Styling
The component uses the specific class .WordScr4mblerText for the content. To manipulate the CSS simply use the ::v-deep .WordScr4mblerText when the parent is in scoped mode.
::v-deep .WordScr4mblerText {
color: blue;
font-size: 10em;
}If the parent is not scoped, simply remove the ::v-deep
.WordScr4mblerText {
color: blue;
font-size: 10em;
}