npm i vue-text-scramble-animation
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>| 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 |
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;
}