Animasi Mengetik dengan Typed.js

Typed.js adalah sebuah plugin JavaScript yang akan memberikan efek mengetik teks secara otomatis pada suatu website sesuai dengan tujuan Javascript yang menjadikan website menjadi lebih interaktif. Matt Boldt adalah developer dari Typed.js ini.

Untuk mendapatkan plugin Typed.js ini dapat diunduh dengan tiga cara sesuai keinginan.

  1. File ZIP pada website resmi Typed js.
  2. Link CDN berikut ( https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.min.js ).
  3. Package manager yang pada Command prompt/Terminal
    • NPM : npm install typed.js
    • Yarn : yarn add typed.js
    • Bower : bower install typed.js

Kali ini kita akan mempraktikkan dengan link CDN. Buatlah sebuah file html seperti di bawah ini:

Setelah menambahkan link ke plugin Typed.js di dalam tag , selanjutnya buat buat tag <span id="typed"></span> yang dibungkus oleh tag <h1></h1> atau tag lainnya.

Setelah kita membuat struktur HTML saatnya untuk bermain dengan Typed js.

Penjelasan

  1. Kita telah membuat variabel typed yang berisi method/function Typed() var typed = new Typed();.
  2. Pada inisiasi di objek Typed() buat dua buah parameter, yang pertama berfungsi untuk memanggil tag <span id="typed"></span> menggunakan #typed. Pada parameter kedua berisi:
    • strings : ['World' , 'Bae'] : Teks apa yang ingin kita tampilkan.
    • typeSpeed : 40: Seberapa cepat proses mengetik.
    • delaySpeed : 90: Seberapa lama jeda untuk mengulang.
    • loop : true: Kondisi teks apakah berulang atau tidak.

Hasil akan seperti ini:

Source Code:

<!DOCTYPE html>
<html>
<head>
<title>Typed js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.min.js"></script>
</head>
<body>
<h1>Hello <span id="typed"></span></h1>
<script type="text/javascript">
var typed = new Typed("#typed", {
strings: ["World", "Bae"],
typeSpeed : 90,
startDelay : 40,
loop:true
});
</script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *