Author: | daniel-z |
---|---|
Views Total: | 725 views |
Official Page: | Go to website |
Last Update: | March 7, 2023 |
License: | MIT |
Preview:

Description:
Console Typer is a JavaScript library to create a configurable typing animation for paragraphs, simulating the experience of typing in a command line interface.
How to use it:
1. Download and import the Console Typer.
import ConsoleTyper from './dist/console-typer.js';
2. Initialize the Console Typer on your text content.
<p class="example"> ... </p>
const consoleTyper = new ConsoleTyper({ paragraphElement: document.getElementsByClassName('example')[0] });
3. Start the typing effect.
consoleTyper.startTyping();
4. Available configurations.
- loop: loop the effect after finish.
- loopAfterSeconds: seconds it waits before starting/restarting the effect.(default: 6)
- cursor: character to use as the cursor (default: “I”)
- stopCursorAfterBlinks: Number of blinks that the cursor will do before stopping. default (10)
- cursorAnimationSpeedMs: Speed of cursor blinking, milliseconds: (default: 500)
- typingSpeedMs: Typing effect speed (default: 70)
- onStartTyping(): fired after starting typing
- onStopTyping: Fired after stopping typing
- onStopCursorAnimation: Fired after cursor animation stops
const consoleTyper = new ConsoleTyper({ loop: true, loopAfterSeconds: 6, cursor: "I", stopCursorAfterBlinks: 10, cursorAnimationSpeedMs: 500, typingSpeedMs: 70, onStartTyping: () => {}, onStopTyping: () => {}, onStopCursorAnimation: () => {} });