Vintage Typing Animation With Sound Effect – Typewriterjs

Category: Animation , Javascript | January 4, 2018
Author: EOussama
Views Total: 1,118
Official Page: Go to website
Last Update: January 4, 2018
License: Apache-2.0

Preview:

Vintage Typing Animation With Sound Effect – Typewriterjs

Description:

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

How to use it:

Download and insert the Typewriterjs into the document.

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

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

new TypeWriter({
    target: document.getElementById('container'),
    text: 'CSSSCRIPT.COM'
});

Customize the time to wait before typing the next character.

new TypeWriter({
    target: document.getElementById('container'),
    text: 'CSSSCRIPT.COM',
    time: 200
});

Enable/disable the sound effect.

new TypeWriter({
    target: document.getElementById('container'),
    text: 'CSSSCRIPT.COM',
    time: 200,
    audio: true
});

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

new TypeWriter({
    target: document.getElementById('container'),
    text: 'CSSSCRIPT.COM',
    cursor: {
      activated: true,
      type: 1 // '_' or '|'
    }
});

API methods.

instance.type();
instance.delete();
instance.stop();
instance.pause();
instance.resume();
instance.setText(text);
instance.setCursor(cursor);
instance.setTime(time);
instance.setAudio(audiopath);

Changelog:

01/04/2019

  • Cursor controls added.

01/02/2019

  • Fixed some bugs with stopping the typewriter.

You Might Be Interested In:


Leave a Reply