npm install typomatic
or
<script src="typomatic.min.js"></script>import Typomatic from 'typomatic';
const typomatic = new Typomatic(element, {
speed: 90 // typing speed (number)
});
typomatic
.type('<em>Hello</em> Typomatic!')
.exec(() => alert('Type slower!'))
.type('\nOK. <em>Goodbye.</em>', 300)
.done()Typomatic doesn't add any CSS to your code, inline or otherwise.
Use the CSS below if you want, or simply copy the classes and style them as you wish.
.typomatic .typing {
white-space: pre-wrap;
}
.typomatic .cursor {
border-left: 2px solid;
}
.typomatic .cursor.blink {
-webkit-animation: blink .9s infinite;
animation: blink .9s infinite;
}
@-webkit-keyframes blink {
0% { opacity: 0; }
10% { opacity: 0; }
20% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 1; }
60% { opacity: 1; }
70% { opacity: 1; }
80% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes blink {
0% { opacity: 0; }
10% { opacity: 0; }
20% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 0; }
50% { opacity: 1; }
60% { opacity: 1; }
70% { opacity: 1; }
80% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 1; }
}type(text, speed)
The speed parameter is optional, in case you want a certain string to have a different typing speed than the default one.
exec(code)
Takes a function as an argument.
done()
You must call this method at the end of the queue.