JavaScript Text Typing Animation | Typewriter Effect

HTML JavaScript Typewriter Text Scrolling, Text Typing Animation

Demo Typewriter

Demo

Add Your Message Text/HTML

Insert Text

Messages drag list up/down to reorder

1

Welcome to html-codes-generator.com!
2

JavaScript Typing Animation Generator
3

Online HTML Code Generator

Preview Typing Animation

Type Speed (ms):

Next Message Delay (ms):

Loading Google Font

Add Styles

Width:

Height:

Font size:

Border Width:

Overflow:

Hidden

Font Family:

Generate code

Google Font Link

HTML

Highlight code

Paste this code between the body tag where you want it to appear

CSS

<style>

Highlight code

Paste this code between the head tag

JavaScript

Highlight code

Paste this code between the body tag, at the bottom of the page

Full Code Run code Edit Code Download

JavaScript Text Typing And Deleting Effect

HTML

<textarea id="typing-deleting-text" readonly></textarea>

CSS

#typing-deleting-text {
  width: 500px;
  height: 30px;
  font-size: 15px;
  border: solid 1px #C9C9C9;
  color: #000000;
  background-color: #FFFFFF;
  text-align: left;
  font-family: Arial;
  font-weight: bold;
  padding: 5px;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

JavaScript

(() => {
    let CharacterPos = 0;
    let MsgBuffer = "";
    let TypingSpeed = 50; // Millisecond
    let NxtMsgDelay = 1000; // Millisecond
    let MsgIndex = 0;
    let delay;
    let deletePos = 1;
    let deleteSpeed = 5; // Millisecond
    let id = document.getElementById("typing-deleting-text");

    let messages = [
      "Welcome to html-codes-generator.com!",
      "JavaScript Typewriter Text Scrolling Generator",
      "Online HTML Code Generator"
    ];

    const StartTyping = () => {
        if (CharacterPos != messages[MsgIndex].length) {
            MsgBuffer += messages[MsgIndex].charAt(CharacterPos);
            id.value = MsgBuffer + (CharacterPos != messages[MsgIndex].length - 1 ? "_" : "");
            delay = TypingSpeed;
            id.scrollTop = id.scrollHeight; //auto scroll bottom
        } else {
            deletePos = 1;
            setTimeout(deleteTyping, NxtMsgDelay);
            return;
        }
        CharacterPos++;
        setTimeout(StartTyping, delay);
    };
    const deleteTyping = () => {
        if (deletePos != messages[MsgIndex].length) {
            id.value = messages[MsgIndex].slice(0, -deletePos);
        } else {
            MsgBuffer = "";
            CharacterPos = 0;
            if (MsgIndex != messages.length - 1) {
                MsgIndex++;
            } else {
                MsgIndex = 0;
            }
            StartTyping();
            return;
        }
        deletePos++;
        setTimeout(deleteTyping, deleteSpeed);
    };
    StartTyping();
})();

Try it Yourself

Report Problem