<p
class="card"
data-typewriter
data-typewriter-from="10"
data-typewriter-delay="100"
data-typewriter-button-text="...more"
>
Morbi fringilla <strong>convallis</strong> sapien, id pulvinar odio volutpat.
Hi omnes lingua, <em class="green">institutis</em>, legibus inter se
differunt. Non equidem invideo, miror magis posuere velit aliquet. Quid securi
etiam tamquam eu <code class="blue">fugiat</code> nulla pariatur. Inmensae
subtilitatis, obscuris et malesuada fames. Fictum, deserunt mollit anim
laborum astutumque!
</p>
<!-- See demo/index.html for full demo -->
Using HTML data attributes, you can create a typewriter effect on text based elements.
data-typewriter
: The element that will be animated.data-typewriter-from
: The starting word of the text (if text is not long enough then nothing will happen).data-typewriter-delay
: The delay between each token inms
.data-typewriter-button-text
: The text of the button that will reveal the rest of the text (this button gets assigned the classtypewriter-more-button
which you can then style as you wish). After being clicked, it dissapears.
$ npm install
$ npm run dev # for development
$ npm run build # for production
You'll end up with various output formats in the dist
directory:
- IIFE
- ES module
- IIFE with Babel preset env
- ES module with Babel preset env
Each type will also have gzipped versions and their corresponding source maps.
The smallest version is the typewriter.mjs.gz
file representing the ES module with gzip compression, which is currently at 1KB.