Author: | emanuelmustea |
---|---|
Views Total: | 212 views |
Official Page: | Go to website |
Last Update: | April 18, 2019 |
License: | MIT |
Preview:

Description:
TyperJS is a lightweight (~2kb) JavaScript library that applies fully configurable typing/deleting animations to the given text.
How to use it:
Download and import the TyperJS into the document.
<!-- For Modern Browsers --> <script src="/path/to/js/typer.es6.min.js"></script> <!-- For Cross Browsers --> <script src="/path/to/js/typer.min.js"></script>
Create a container to place the text.
<div class="example"></div>
Initialize the Typer and define the text you want to print.
var typer = new Typer({ elem: '.example', typeText: 'text to print' });
It also supports print an array of text.
var typer = new Typer({ elem: '.example', typeText: ["First text", "Second text"] });
Specify the number of repeats. Default: 0 (infinite).
var typer = new Typer({ elem: '.example', typeText: ["First text", "Second text"], repeat: 3 });
Set the interval between characters while typing. Default: 100ms.
var typer = new Typer({ elem: '.example', typeText: ["First text", "Second text"], interval: 200 });
Set the animation delay. Default: 0.
var typer = new Typer({ elem: '.example', typeText: ["First text", "Second text"], delay: 2000 });
Determine whether to show the cursor while typing. Default: true.
var typer = new Typer({ elem: '.example', typeText: ["First text", "Second text"], typingLine: false });
Determine whether to delete the text when reaching the repeat limit. Default: false.
var typer = new Typer({ elem: '.example', typeText: ["First text", "Second text"], deleteOnFinish: true });
Determine whether to hide the cursor when reaching the repeat limit. Default: true.
var typer = new Typer({ elem: '.example', typeText: ["First text", "Second text"], hideLineOnFinish: false });
Play/pause the typing animation.
typer.play(); typer.pause();
Reload the library with new options.
typer.reload(newOptions);
Destroy the library.
typer.destroy();