Vintage Typing Animation With Sound Effect – Typewriterjs

Category: Animation , Javascript | February 4, 2021
Author: EOussama
Views Total: 227 views
Official Page: Go to website
Last Update: February 4, 2021
License: Apache-2.0

Preview:

Vintage Typing Animation With Sound Effect – Typewriterjs

Description:

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.

You Might Be Interested In:


Leave a Reply