Home
Animated Typing
Documents

Animated Typing

Animated Auto Run Typing
Dev

Animated Typing


JavaScript Text Typing Animation | Typewriter Effect

HTML JavaScript Typewriter Text Scrolling, Text Typing Animation

1

Add Your Message Text/HTML

Insert Text
2

Messages drag list up/down to reorder

  • 1
  • 2
  • 3
3

Preview Typing Animation

Loading Google Font
4

Add Styles

Hidden
Loading...
Generate code
Google Font Link
HTML
Paste this code between the body tag where you want it to appear
CSS
Paste this code between the head tag
JavaScript
Paste this code between the body tag, at the bottom of the page
Run code Download
Powered by Dev Chandel
Welcome To Dev Chandel, Web Development & Design, Training Services, Android Application Development, Software Development, Designing Services, Digital Marketing Services, Bookkeeping Services, Consultancy Services, Training Services, IT Support, Digital Printing Services, Much More Services Provided by Dev Chandel. If you want Premium Code, Please Click Here => Dev Chandel

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 GoojDex Tools!",
      "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();
})();

***Get Tools Code***

GoojDex- Animated Typing Size:-> 179Kb
https://gdexport.blogspot.com/2022/11/export-url.html#?o=38c63d928648378bd2c87c1e36bd1ddda05ae3de919efbd7244511332903a5bcf0207340938904a53667bd5da04dab46a39c637ebd237143a8e429623d985ba94fdf29d07153632433eb89e8cf393647990f3edb9b9ffcde
Password => GoojDex123


Post a Comment