Author: | hsynlms |
---|---|
Views Total: | 125 views |
Official Page: | Go to website |
Last Update: | May 23, 2021 |
License: | MIT |
Preview:

Description:
Yet another text typing effect written in pure JavaScript.
The AutoTyper.js library outputs an array of specific text letter by letter with several useful options:
- Infinite loop.
- Custom animation speed/delay.
- flipflop effect.
How to use it:
Create an empty container where you want to output the text.
<h1 class="demo"> </h1>
Insert the JavaScript file ‘AutoTyper.js’ into the document.
<script src="dist/autotyper.js"></script>
Create a new ‘autoTyper’ instance and define an array of text to output.
var typer = new autoTyper({ selector: ".demo", words: ["CSSSCRIPT",".COM","CSSSCRIPT.COM"], });
Start the text typing effect.
typer.start();
Append a blinking caret to the end of the text while typing.
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } } .demo { display: inline-block; border-right: 1px solid #404145; -webkit-animation: blink-caret 0.5s step-end infinite alternate; animation: blink-caret 0.5s step-end infinite alternate; }
Possible configuration options to customize the text typing effect.
var typer = new autoTyper({ selector: ".demo", words: ["CSSSCRIPT",".COM","CSSSCRIPT.COM"], charSpeed: 85, // typing speed delay: 2100, // typing delay loop: true, // infinite loop flipflop: true, // enable flipflop effect position: 0, // position currentWord: "", // current word element: null, // selector isStopped: false // is stopped on init });
Pause/stop the typing effect.
typer.stop();
Changelog:
v1.0.3 (05/23/2021)
- Standard JS compatibility
- Fix: duplicate header of minified AutoTyper file
v1.0.2 (05/01/2021)
- Chore: packages are updated