Cara Mengubah Text Biasa Menjadi Text Dengan Animasi Mengetik Menggunakan HTML, CSS dan JavaScript

Pernahkah Anda melihat teks yang muncul satu per satu seolah-olah sedang diketik langsung di layar? Efek ini sering digunakan untuk menambahkan kesan dinamis dan menarik pada website, terutama untuk memperkenalkan judul, pesan penting, atau elemen interaktif lainnya. Dalam artikel ini, kita akan belajar cara membuat efek animasi mengetik dengan mudah menggunakan HTML, CSS, dan JavaScript. Tidak hanya menambahkan estetika pada halaman web, efek ini juga dapat meningkatkan pengalaman pengguna dan memberi kesan profesional pada desain Anda. Mari kita mulai dan lihat bagaimana efek mengetik ini bekerja!

JavaScript:

 <script>
    const text = "This is \n Typing Text Animation";
    const typingTextElement = document.getElementById("typing-text");
    let index = 0;
    let isDeleting = false;

    function typeEffect() {
        if (!isDeleting && index < text.length) {
            if (text[index] === "\n") {
                typingTextElement.innerHTML += "<br>";
            } else {
                typingTextElement.innerHTML += text[index];
            }
            index++;
            setTimeout(typeEffect, 100);
        } else if (isDeleting && index > 0) {
            const currentText = typingTextElement.innerHTML;
            typingTextElement.innerHTML = currentText.slice(0, -1);
            index--;
            setTimeout(typeEffect, 50);
        } else if (!isDeleting && index === text.length) {
            setTimeout(() => {
                isDeleting = true;
                typeEffect();
            }, 2000); // Pause before deleting
        } else if (isDeleting && index === 0) {
            isDeleting = false;
            setTimeout(typeEffect, 100); // Restart typing
        }
    }
    typeEffect();
 </script>

CSS:

 <style>
    body {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .typing-effect {
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        color: var(--primary-yellow, #ffc107);
    }

    .secondary-color {
        color: var(--secondary-blue, #007bff);
    }

    .cursor {
        display: inline-block;
        width: 2px;
        height: 1.5rem;
        background-color: black;
        animation: blink 0.6s steps(2, start) infinite;
        vertical-align: middle;
    }

    @keyframes blink {
        to {
            visibility: hidden;
        }
    }
 </style>

HTML:

Pada HTML, saya juga menggunakan class dari bootstrap. Silahkan sesuaikan dengan kebutuhan!

 <p class="typing-effect fs-4 fw-bolder mt-4 mb-1 text-center align-middle">
    <span id="typing-text"></span>
    <span class="cursor"></span>
 </p>

Sekarang Anda telah mengetahui cara membuat efek teks dengan animasi mengetik menggunakan HTML, CSS, dan JavaScript. Dengan sedikit kreativitas, Anda dapat mengembangkan teknik ini untuk berbagai kebutuhan, seperti menampilkan pesan sambutan, deskripsi produk, atau elemen interaktif lainnya. Jangan ragu untuk bereksperimen dengan kecepatan mengetik, warna, dan gaya teks agar sesuai dengan tema website Anda. Semoga artikel ini bermanfaat dan membantu meningkatkan keterampilan Anda dalam pengembangan web. Selamat mencoba, dan sampai jumpa di tutorial berikutnya!