typewriter-effect-javascript

Create a Human Writing Simulator Effect For Your Website | TypeWriter

by

A typeWriter is a JavaScript library to simulate the effect of a typewriter that prints any text by writing and deleting animations.

You need to call the TypeWriter class in JavaScript. The class contains two parameters. The first is required, this is the element you want to add a TypeWriter effect to. This element can be itself or a string to get the element. The second parameter is the custom options.

typewriter effect javascript, typewriter js, css typewriter effect, jquery typewriter effect, html typewriter effect, css typewriter effect multiple lines

This is an object with the following options:

  • timeout: The time to wait before adding the new character to the string, in milliseconds. The default is 100 milliseconds.
  • Loop: whether or not the element’s TypeWriter should be repeated. The default is false.
  • Pointer: Pointer settings
  • Speed: The speed of the pointer in milliseconds. The default is 1000 milliseconds.
  • Size: The size of the cursor in CSS. You can set the size for example to 28px. The default is the largest property value.
  • identifier: The identifier of the style element to be added in the header element of the pointer. You can customize this so you can find it again easily. The default is TypeWriter_Effect_CSS.

How to make use of it:

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

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

2. Configure the TypeWriter.

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

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

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

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

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

5. Remove a specified number 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 writing and deleting the animation.

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

8. Available options for configuring 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
})

Human Typing Simulator In JavaScript, TypeWriter Plugin/Github

See Demo And Download

Demo
Download

Official Website(Luuk-Dev): Click Here

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

Leave a Comment