JavaScript Animated Typing
JavaScript Text Typing Animation | Typewriter Effect
HTML JavaScript Typewriter Text Scrolling, Text Typing Animation
1
Add Your Message Text/HTML
Powered by Dev Chandel
JavaScript Text Typing And Deleting Effect
#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;
}
(() => {
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();
})();
https://gdexport.blogspot.com/2022/11/export-url.html#?o=1838b84ce0bd88acb8b91554d684fedb1dd62248564ad1f7e37044379de295ee4c949258746cd0707f17d91c1ec387ad4b4d1bb3a742d6d23682259c50eecef6bce88cffe6e635e5ed292f89391750b95ca98e8d4d85fa681882677dd160cac9b0e530fddfb531c1
If you encounter any problem, do not hesitate to contact us
©Copyright: Dev Chandel™