Autotyperjs can be accessed in a global variable like auto typer. It reveals two external functions, starting and stopping. Multiple instances can be created with a new keyword. It is compatible with Chrome, Firefox, Safari, Internet Explorer and Edge.
The AutoTyper.js library outputs a set of text delimited character by character with many useful options:
- infinite loop.
- Custom animation speed/delay.
- Flipflop effect.
How to make use of it:
Create an empty container the place you need to output the textual content.
<h1 class="demo"> </h1>
Insert the JavaScript file ‘AutoTyper.js’ into the doc.
<script src="dist/autotyper.js"></script>
Create a brand new ‘autoTyper’ occasion and outline an array of text to output.
var typer = new autoTyper({
selector: ".demo",
words: ["webcodeflow",".com","webcodeflow.com"],
});Start the textual content typing impact.
typer.start();
Append a blinking caret to the end of the text whereas 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 choices to customize the text typing effect.
var typer = new autoTyper({
selector: ".demo",
words: ["webcodeflow",".com","webcodeflow.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/cease the typing impact.
typer.stop();
Configurable Text Typing Effect, AutoTyper JS Plugin/Github
See Demo And Download
Official Website(hsynlms): Click Here
This superior jQuery/javascript plugin is developed by hsynlms. For extra Advanced usage, please go to the official website.
