1 
2<span id="typing-text"></span>          

 1 
 2@keyframes blink {
 3  0%,
 4  100% {
 5    border-color: transparent;
 6  }
 7  50% {
 8    border-color: var(--text-color);
 9  }
10}
11 
12#typing-text {
13  color: black;
14  border-right: 3.5px solid black; /* Simulasi kursor yang berkedip */
15  white-space: nowrap;
16  overflow: hidden; /* Agar teks tidak meluap */
17  font-size: 5.6rem;
18  font-weight: 700;
19  line-height: 1.5; /* Pastikan line-height tetap ada */
20  display: inline-block; /* Agar ukuran elemen sesuai dengan teks */
21  min-height: calc(5.6rem * 1.5); /* Menjaga tinggi elemen saat teks belum muncul */
22}
23 
24#typing-text {
25  animation: blink 0.7s steps(2) infinite;
26}          

 1 
 2// typing
 3const text = "Kodeset"; // Teks yang akan dianimasikan
 4let index = 0;
 5let isDeleting = false;
 6const speed = 100; // Kecepatan mengetik
 7const delayBeforeDeleting = 3000; // Waktu jeda sebelum menghapus
 8const delayBeforeTypingAgain = 500; // Waktu jeda sebelum mengetik ulang
 9 
10function typeText() {
11  const typingTextElement = document.getElementById("typing-text");
12 
13  if (isDeleting) {
14    typingTextElement.innerHTML = text.substring(0, index);
15    index--;
16    if (index < 0) {
17      isDeleting = false;
18      setTimeout(typeText, delayBeforeTypingAgain);
19    } else {
20      setTimeout(typeText, speed / 2); // Lebih cepat saat menghapus
21    }
22  } else {
23    typingTextElement.innerHTML = text.substring(0, index);
24    index++;
25    if (index > text.length) {
26      isDeleting = true;
27      setTimeout(typeText, delayBeforeDeleting); // Jeda sebelum mulai menghapus
28    } else {
29      setTimeout(typeText, speed); // Kecepatan mengetik
30    }
31  }
32}
33 
34window.onload = function () {
35  setTimeout(typeText, delayBeforeTypingAgain); // Mulai mengetik setelah jeda
36};