slow-typer

A typewritter effect class

Usage no npm install needed!

<script type="module">
  import slowTyper from 'https://cdn.skypack.dev/slow-typer';
</script>

README

Slow Typer

Slow Typer is an easy to use JavaScript typewriter effect class.

Installation

yarn add slow-typer

Initialization

// Import
import SlowTyper from 'slow-typer'

// Init (see "Parameters" for available options)
const typewriter = new SlowTyper('#target', { delay: 50, jitter: 0 })

Parameters

Name Type Description
target Mixed The initial target. Can be either a CSS selector or an instance of HTMLElement
options Object An object overriding the default settings (see "Options")

Options

Name Type Default Description
delay Number 100 The average delay between two keystrokes in milliseconds.
jitter Number 25 The possible random variation in delay in milliseconds. Total delay will be delay ± jitter

Properties

Name Type Description
target Mixed The element in which to output the text. Can be either a CSS selector or an instance of HTMLElement.
delay Number The average delay between two keystrokes in milliseconds.
jitter Number The possible random variation in delay in milliseconds. Total delay will be delay ± jitter

Methods

Name Description
write(text) Outputs text to current target
writeTo(target, text) Changes current target to target and outputs text to it
clear() Clears target text

Demo

You can try a demo on Codepen (Might not be up to date)