Human Typing Simulator In JavaScript – TypeWriter

Category: Animation , Javascript | February 11, 2022
Author:Luuk-Dev
Views Total:121 views
Official Page:Go to website
Last Update:February 11, 2022
License:MIT

Preview:

Human Typing Simulator In JavaScript – TypeWriter

Description:

Yet another JavaScript library to simulate the typewriter effect that prints any text with typing and deleting animations.

See Also:

How to use it:

1. Download and import the TypeWriter.js JavaScript library.

<script src="./TypeWriter.js"></script>

2. Initialize the TypeWriter.

<h1 id="typewriter"></h1>
new TypeWriter(`#typewriter`, {
    // options here
})

3. Define the text to print in the container you just created.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)

4. Specify the time to wait before performing the next action.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)
.wait(2000)

5. Remove a specified amount of characters.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)
.wait(2000)
.remove(6)

6. Or remove all text.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)
.wait(2000)
.removeAll()

7. Start the typing & deleting animations.

new TypeWriter(`#typewriter`, {
    // options here
})
.write(`Hello World!`)
.wait(2000)
.removeAll()
.start();

8. Available options to config the typewriter effect.

new TypeWriter(`#typewriter`, {
    // determine to loop the animation
    loop: true,
    // customize the binking cursor
    cursor: {
      speed: 700,
      size: 'larger',
      id: 'Some_TypeWriter_CSS'
    },
    // time to wait before adding the new character to the string in miliseconds
    timeout: 50
})

Changelog:

02/11/2022

  • Update TypeWriter.js

You Might Be Interested In:


Leave a Reply