Membuat Efek Mengetik pada Tulisan di Blogger dengan Typed.js

Typed.js merupakan JavaScript library untuk membuat efek seperti mengetik dengan kursor berkedip. JS ini bisa sobat gunakan untuk mempercantik tampilan Web / Blog sobat. Untuk contohnya seperti pada gambar GIF di bawah:

Demo

Cara Menggunakan / Memasang Typed.js di Blog

Untuk memasang di Blog, saya gunakan cara termudah (karena Blogger tidak menggunakan hosting sendiri), jadi saya menggunakan versi CDN. Simpan kode ini di atas </body>

<!-- Load library from the CDN -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>

<!-- Setup and start animation! -->
<script>
  var typed = new Typed('#typed', {
    strings: ['Kata-kata ke 1.', 'Kata-kata ke 2.', 'Kata-kata ke 3.', 'dst'],
    typeSpeed: 50,
   });
</script>

Kemudian untuk memunculkan Efek ini (pemanggil), tulis kode HTMLnya seperti ini

<span id="typed"></span>

Kostumisasi JavaScript

Ada beberapa hal yang perlu diperhatikan

1. Edit kata-kata yang akan dimunculkan
2. Untuk merubah kecepatan silahkan edit typeSpeed: 50,
3. Supaya ketikan berulang dan tidak berhenti di kalimat terakhir tambahkan kode loop: true,

Sehingga kode yang sudah diedit, contohnya seperti ini:

<!-- Setup and start animation! -->
<script>
  var typed = new Typed('#typed', {
    strings: ['Kata-kata ke 1.', 'Ini kata ke 2.', 'Dan ini kata ke-3.', 'Inilah yang terakhir'],
    typeSpeed: 80,
    loop: true,
   });
</script>

Uji Coba

Untuk yang lebih lengkapnyabisa dipelajari di Github

Semoga bermanfaat