Author: | lourenc |
---|---|
Views Total: | 509 views |
Official Page: | Go to website |
Last Update: | March 2, 2020 |
License: | MIT |
Preview:

Description:
tinytyper is a simple, tiny, standalone JavaScript library that animates your text character by character just as someone typing something in a terminal or on a typewriter.
How to use it:
1. Install and import the tinytyper as an ES module.
# NPM $ npm install tinytyper --save
import TinyTyper from 'tinytyper';
2. Or include the UMD version on the HTML page.
<script src="./lib/tinytyper.js"></script>
3. Initialize the plugin on a placeholder in which you want to print the text. That’s it.
var el= document.querySelector('.container') var options = { text: 'CSSScript \n .COM \n CSSScript.com' } var instance = new tinytyper(el, options)
4. Customize the blinking cursor displayed at the end of the text while typing.
var options = { text: 'CSSScript \n .COM \n CSSScript.com', cursorClass: 'tiny-typer-cursor', cursor: ' ▌' }
5. Customize the animation speed. Default: 95.
var options = { text: 'CSSScript \n .COM \n CSSScript.com', textSpeed: 100 }
6. Override the default wrapper class.
var options = { text: 'CSSScript \n .COM \n CSSScript.com', textClass: 'tiny-typer-text' }
7. Re-animate the text.
instance.animate()