Cara Membuat Animasi Mengetik Teks Dengan CSS dan Javascript

Cara Membuat Animasi Mengetik Teks Dengan CSS dan Javascript

...
Hilmi・ Created at 13 April 2021
7 min read ・ Updated at 13 April 2021

Animasi Mengetik Teks - Pernahkan kamu melihat disuatu website terdepat animasi seperti mengetik teks ? Contohnya seperti di website bisabos.com atau tepatnya di halaman Home. Apakah kamu tertarik membuat animasi atau efek mengetik teks di websitemu ? Nah di artikel ini kita akan sama-sama belajar bagaimana cara membuat animasi atau efek mengetik teks atau text typing animation  menggunakan CSS dan Javascript.

Caranya sangat mudah sekali, silahkan ikuti saja mulai dari awal dan saya jamin setelah membaca dan mengikuti langkah-langkah pada artikel Cara Membuat Animasi Mengetik Teks Dengan CSS dan Javascript ini, kamu akan langsung bisa membuat animasi mengetik teks pada website atau projek kamu.

Pendahuluan

Untuk memulai latihan membuat efek animasi mengetik teks atau text typing animation, kita perlu menyiapkan kebutuhan-kebutuhan yang diperlukan terlebih dahulu. Apa saja yang dibutuhkan dalam percobaan ini ?

  1. Text Editor (Saya menggunakan Visual Code Studio)
  2. Browser (Saya menggunakan chrome)

Ada beberapa opsi yang akan kita coba di artikel Membuat Animasi Mengetik Teks atau Text Typing Animation pada artikel ini, antara lain; menggunakan CSS, Javascript, Package dan lain-lain:

Membuat Animasi Mengetik Teks dengan CSS

Di opsi pertama ini, kita akan mencoba membuat animasi mengetik teks atau text typing animation menggunakan CSS. Pertama kita akan menyiapkan file html, buat file html misal typing.html kemudian masukkan atau copy kode di bawah ini dan paste di file typing.html yang baru saja dibuat.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Text Typing Animation</title>
        <style>
            body
            {
            background:#007aff;
            margin-top:200px;
            margin-left:50px;
            }
            #typing {
            width: 0ch;
            color: white;
            float: left;
            font-family: sans-serif;
            font-weight:bold;
            font-size: 60px;
            overflow: hidden;
            white-space: nowrap;
            animation: typing 5s steps(22) 1s infinite alternate;
            }
            #typing span{
            color:#fb8c00;}
            #line {
            float: left;
            color: white;
            font-weight:bold;
            font-size: 60px;
            animation: crow 0.5s linear 0s infinite;
            }
            @keyframes typing {
            from {
            width: 0ch;
            }
            to {
            width: 25ch;
            }
            }
            @keyframes crow {
            from {
            opacity: 0;
            }
            to {
            opacity: 1;
            }
            }
        </style>
    </head>
    <body>
        <div id="typing">Hello World, <span>Welcome to Bisabos.com</span></div>
        <div id="line">|</div>
    </body>
</html>

Save atau simpan, kemudian coba buka file typing tersebut di browser kalian. Dan hasilnya kita sudah berhasil membuat animasi mengetik teks menggunakan CSS.

Membuat Animasi Mengetik Teks atau Text Typing Animation Menggunakan Javascript

Di opsi menggunakan javascript, kita akan mencoba dengan beberapa variasi. Sebenarnya cara membuat efek atau animasi mengetik teks atau text typing animation dengan javascript tidak begitu sulit, ada banyak sekali situs-situs yang membagikan tutorial menggunakan jquery, vanillajs, vuejs, atau package-package yang dapat kita gunakan apapun dan dalam kodisi apapun, entah untuk digunakan sendiri maupun digunakan untuk komersil.

Variasi 1

Variasi membuat animasi mengetik teks dengan javascript yang pertama adalah menggunakan event onclick. Disini saya masih menggunakan file typing.html, hanya saja seluruh kode di dalamnya akan saya ubah semua. Jika kalian ingin membuatnya dilain file juga tidak masalah, misalnya dengan membuat file baru dengan nama typingJS1.html kemudian copy kode di bawah ini dan paste pada file typingJS1.html yang baru saja dibuat.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Text Typing Animation</title>
    </head>
    <body>
        <h1>Typewriter</h1>
        <button onclick="typeWriter()">Click</button>
        <p id="typing"></p>
        <script>
            var i = 0;
            var txt = 'Hello world, Welcome to Bisabos.com';
            var speed = 50;
            
            function typeWriter() {
              if (i < txt.length) {
                document.getElementById("typing").innerHTML += txt.charAt(i);
                i++;
                setTimeout(typeWriter, speed);
              }
            }
        </script>
    </body>
</html>

Save, kemudian coba buka di browser kalian. Akan ada button atau tombol click, jika button tersebut ditekan maka akan menampilkan efek atau animasik mengetik teks.

Variasi 2

Di variasi kedua, kita akan coba membuat animasi mengetik teks atau text typing animation menggunakan vanillaJS. Caranya hampir sama dengan variasi 1, disini saya masih memakai file typing.html atau kalau kalian mau membuat file baru lagi juga bisa, misalnya kalian bisa membuat file baru dengan nama TypingJS2.html kemudian copy semua kode di bawah ini dan paste di file yang baru dibuat tadi.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Text Typing Animation</title>
    </head>
    <body>
        <h2 class="typewrite text-white" data-period="2000" data-type='[ "Hello, World!.","Selamat Datang Di Bisabos","Temukan dan Baca Artikel Seputar Koding Ada Disini." ]'>
            <span class="wrap">Hello, World!.</span>
        </h2>
        <script>
            var TxtType = function(el, toRotate, period) {
            this.toRotate = toRotate;
            this.el = el;
            this.loopNum = 0;
            this.period = parseInt(period, 10) || 2000;
            this.txt = '';
            this.tick();
            this.isDeleting = false;
            };
            
            TxtType.prototype.tick = function() {
            var i = this.loopNum % this.toRotate.length;
            var fullTxt = this.toRotate[i];
            
            if (this.isDeleting) {
            this.txt = fullTxt.substring(0, this.txt.length - 1);
            } else {
            this.txt = fullTxt.substring(0, this.txt.length + 1);
            }
            
            this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
            
            var that = this;
            var delta = 200 - Math.random() * 100;
            
            if (this.isDeleting) { delta /= 2; }
            
            if (!this.isDeleting && this.txt === fullTxt) {
            delta = this.period;
            this.isDeleting = true;
            } else if (this.isDeleting && this.txt === '') {
            this.isDeleting = false;
            this.loopNum++;
            delta = 500;
            }
            
            setTimeout(function() {
            that.tick();
            }, delta);
            };
            
            window.onload = function() {
            var elements = document.getElementsByClassName('typewrite');
            for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
            new TxtType(elements[i], JSON.parse(toRotate), period);
            }
            }
            // INJECT CSS
            var css = document.createElement("style");
            css.type = "text/css";
            css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
            document.body.appendChild(css);
            };
        </script>
    </body>
</html>

Save, kemudian coba buka file html tersebut di browser kalian, hasilnya akan terlihat efek atau animasi mengetik teks atau text typing animation di halaman browser. Variasi kedua ini merupakan cara yang dipakai untuk membuat animasi mengetik teks di halaman home bisabos.com.

Kesimpulan

Di artikel ini kita telah sama-sama belajar bagaimana cara membuat efek atau animasi mengetik teks menggunakan CSS dan javascript. Ada banyak sekali cara membuat animasi mengetik teks, hanya saja pada artikel Cara Membuat Animasi Mengetik Teks atau Text Typing Animation kali ini kita hanya mencoba 3 cara saja. Kalian bisa menggunakan plugin yang banyak tersedia juga di situs-situs penyedia seperti plugin typewriterJS, TypedJS, AnimateTypingJS, JQueryTyperJS, TypingJS dan masih banyak lagi. Efek animasi mengetik teks atau text typing animation bisa dipakai atau digunakan pada website untuk memberikan UI yang lebih menarik lagi.

Sekian artikel kali, jika kamu punya cara lain selain yang ada di artikel ini, bisa kalian share di kolom komentar di bawah ini dan jika ada kritik, saran, masukan atau apapun itu yang ingin disampaikan, bisa juga kalian tulis atau didiskusikan di form komentar di bawah ini. 

Tinggalkan Komentar
Loading Comments
Affiliate Banner Unlimited Hosting Indonesia