JavaScript 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
  Welcome to GoojDex Tools!
• 2
  JavaScript Typing Animation Generator
• 3
  Online HTML Code Generator

3

Preview Typing Animation

Type Speed (ms):

Next Message Delay (ms):

Loading Google Font

4

Add Styles

Width:

Height:

Font size:

Border Width:

Overflow:

Hidden

Text Color:

Background Color:

Border Color:

Text Align:

Font Style:

B I U

Font Family:

Loading...

Arial Comic Sans MS Impact Trebuchet MS Tahoma cursive Georgia Verdana Courier Monospace

Generate code

Google Font Link

HTML

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

CSS

<style>

Paste this code between the head tag

JavaScript

<script>

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

Run code Download

---

Powered by Dev Chandel

GoojDex Smart Web Kit

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- JavaScript Animated Typing Size:-> 53Kb

https://gdexport.blogspot.com/2022/11/export-url.html#?o=1838b84ce0bd88acb8b91554d684fedb1dd62248564ad1f7e37044379de295ee4c949258746cd0707f17d91c1ec387ad4b4d1bb3a742d6d23682259c50eecef6bce88cffe6e635e5ed292f89391750b95ca98e8d4d85fa681882677dd160cac9b0e530fddfb531c1

Password => GoojDex123

vertical_align_bottom Premium Code

If you encounter any problem, do not hesitate to contact us

©Copyright: Dev Chandel™

Go to Link