Javascript-Library-for-Old-Typewriter-Text-Animation-Effect

Javascript Library for Old Typewriter Text Animation Effect | Typewriterjs

by

TypewriterJS is a promise-based virtual typewriter that provides an easy and hackable way to produce and maintain typewriter-like animations over text, and basic things like typing, deleting, and moving the cursor are just at the command.

typewriter text effect generator, typewriter text generator, classic typewriter font, typewriter effect free, typewriter font word download, typewriter video effect free

How to make use of it:

1. Download and insert the Typewriterjs into the doc.

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

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

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

typewriter.type(" ");

3. Customize the time to attend earlier than typing the following character.

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 can show on the finish of the text whereas 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 each character.

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

7. API strategies.

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

Vintage Typing Animation With Sound Effect, TypeWriter JS Plugin/Github

See Demo And Download

Demo
Download

Official Website(EOussama): Click Here

This superior jQuery/javascript plugin is developed by EOussama. For extra Advanced Usages, please go to the official website.

Leave a Comment