Vintage Typing Animation With Sound Effect – Typewriterjs

Typewriterjs is a vanilla JavaScript library that applies a typewriter-like typing effect to text content with support for custom cursor and sound effect.

How to use it:

1. Download and insert the Typewriterjs into the document.

<script type="text/javascript" src="dist/typewriter.min.js"></script>

2. Create a new TypeWriter instance and specify the target container & text to output.

var typewriter = new Typewriter("#container");

typewriter.type("CSSScript.com");

3. Customize the time to wait before typing the next character. Default: 0.

new TypeWriter({
    target: document.getElementById('container'),
    delay: 200
});

4. Enable/disable the sound effect.

new TypeWriter({
    target: document.getElementById('container'),
    sound: {
      // Whether or not to enable the typing sounds
      enabled: false,
      // The volume of the typing sounds
      volume: 0.5,
    },
});

5. Customize the cursor that will display at the end of the text while typing.

new TypeWriter({
    target: document.getElementById('container'),
    cursor: {
      // The starting index of the cursor
      index: 0,
      // The type of the caret, can be “stick“, “underscore” or a name of your choosing
      type: "stick",
      // Whether or not the play a blinking animation on the caret
      blink: true,
    }
});

6. Determine the interval in milliseconds between inputting every character. Default: 300

new TypeWriter({
    target: document.getElementById('container'),
    tick: 500
});

7. API methods.

typewriter.type(text, config);
typewriter.delete(chars, config);
typewriter.stop(config);
typewriter.resume(config);
typewriter.clear(config);
typewriter.move(index); // move cursor

Changelog:

02/04/2021

• Demo update

v5.0.0 (11/08/2020)

• Complete rewrite and refactorization.

01/04/2019

• Cursor controls added.

01/02/2019

• Fixed some bugs with stopping the typewriter.