Classic Terminal Typing Effect In JavaScript – Console Typer

Category: Animation , Javascript , Text | March 7, 2023
Author:daniel-z
Views Total:658 views
Official Page:Go to website
Last Update:March 7, 2023
License:MIT

Preview:

Classic Terminal Typing Effect In JavaScript – Console Typer

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: () => {}
});

You Might Be Interested In:


Leave a Reply