Typerwriter Text ⌨️

Credits to MA Gang

How to setup:

Paste in the code
Go down to where the quoted messages are (Should Say "Message 1" to "Message 5")
Change the text or font.
Use the code.

Preview

Code :

<!DOCTYPE html>

<head>

<title>by UNBL0CKEDZ0NE</title>

<style>

body {

margin: 0;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background-color: transparent;

}

#typewriter {

font-family: 'Pixelify Sans', sans-serif;

font-size: 60px;

color: white;

white-space: nowrap;

overflow: hidden;

border-right: 2px solid white;

width: fit-content;

}

</style>

</head>

<body>

const messages = [

"Message 1",

"Message 2",

"Message 3",

"Message 4",

"Message 5",

];

const speed = 100;

const pause = 1000;

const element = document.getElementById("typewriter");

let messageIndex = 0;

let charIndex = 0;

let isDeleting = false;

function typeLoop() {

const currentMessage = messages[messageIndex];

if (!isDeleting) {

element.textContent = currentMessage.substring(0, charIndex);

charIndex++;

if (charIndex > currentMessage.length) {

isDeleting = true;

setTimeout(typeLoop, pause);

return;

}

} else {

charIndex--;

element.textContent = currentMessage.substring(0, charIndex);

if (charIndex === 0) {

isDeleting = false;

messageIndex = (messageIndex + 1) % messages.length;

}

setTimeout(typeLoop, speed);

}

typeLoop();

</script>

</body>

</html>