English | ็ฎไฝไธญๆ
Vue Animated typing in ~400 bytes ๐ก of JavaScript. Preview โ
You can install vue-typical via npm:
npm install vue-typical
Or use it directly in browser via cdn service:
<script src="https://cdn.jsdelivr.net/npm/vue-typical@latest/dist/typical.umd.min.js"></script>
<typical
:steps="['Hello', 1000, 'Hello world!', 500]"
:wrapper="'h2'"
></typical>
<typical
class="typicalWrapper"
:steps="['Fucking', 1000, 'Fucking Awesome!', 500, 'Fucking Awesome! Aha :-) ๐', 1000]"
:loop="Infinity"
:wrapper="'h3'"
></typical>
Prop | Required | Type | Eg. |
---|---|---|---|
steps |
True | Array<String | Number | Function> | ['Hello', 1000, () => alert('Word')] |
loop |
False | Number | 1 or 'Infinity' |
wrapper |
False | String | 'div' |
Add the blink cursor effect with typicalWrapper
classname.
.typicalWrapper::after {
content: "|";
animation: blink 1s infinite step-start;
}
@keyframes blink {
50% { opacity: 0; }
}
npm install
npm run serve
npm run build
Thanks goes to these people (emoji key):
Turkyden ๐ป๐๐ |
KnowsCount ๐ |
This library is based on @camwiegert/typical work and it currently is just a wrapper for vue.
Inspired by @catalinmiron/react-typical.