Author: | Gigabyte5671 |
---|---|
Views Total: | 76 views |
Official Page: | Go to website |
Last Update: | February 9, 2022 |
License: | MIT |
Preview:

Description:
Yet another vanilla JavaScript library that applies a typewriter-like text typing (and deleting) animation to any text.
How to use it:
1. Load the minified version of the AutoTypeJS library in the document.
<script src="autotype.min.js"></script>
2. Load the autotype.min.css stylesheet for blinking cursors. OPTIONAL.
<link rel="stylesheet" href="autotype.min.css" />
3. Call the AutoType function on the target container.
<h1 id="headline"></h1>
AutoType("headline");
4. Define the text to be printed with a typing animation.
AutoType("headline", "AutoType JS Library Example");
5. Config the animation speed.
AutoType("headline", "AutoType JS Library Example", 300);
6. Perform an action after the animation has finished.
AutoType("headline", "AutoType JS Library Example", callback);
7. Add a blinking cursor to the end of the text while typing.
<h1 id="headline" class="autotype_horizontal_cursor"> Horizontal Cursor </h1> <h1 id="headline" class="autotype_vertical_cursor"> Vertical Cursor </h1>
8. Erase the text with a deleting animation.
AutoBackspace("headling", 500, callback);