Website Interaktif dengan Typed.js

Muhammad Budhiluhoer 6 Juli 2018

Typed.js adalah plugin JavaScript yang memberikan efek teks menulis secara otomatis pada website kita sesuai dengan tujuan Javascript yang menjadikan website menjadi interaktif. Typed.js ini dibuat oleh Matt Boldt di Texas, US.

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

File ZIP pada web resmi Typed js.
Link CDN ( https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.min.js ).
Package manager pada Command prompt/Terminal

NPM : npm install typed.js
Yarn : yarn add typed.js
Bower : bower install typed.js

Pada kasus kali ini kita gunakan cara CDN. html

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

Membuat variabel typed yang berisi method/function Typed() var typed = new Typed();.
Pada inisiasi objek Typed() buat dua buah parameter, yang pertama panggil tag <span id="typed"></span> menggunakan #typed. Pada parameter kedua berisi:

strings : ['Developer' , 'Designer'] : Teks apa yang ingin di tampilkan.
typeSpeed : 40: Seberapa cepat proses teks mengetik.
delaySpeed : 90: Seberapa lama jeda teks untuk mengulang.
loop : true: Kondisi teks apakah looping atau tidak.