Website Interaktif dengan Typed.js

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.

  1. File ZIP pada web resmi Typed js.
  2. Link CDN ( https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.min.js ).
  3. 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.

typed

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

script typed js

Penjelasan

  1. Membuat variabel typed yang berisi method/function Typed() var typed = new Typed();.
  2. 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.

https://i.pinimg.com/originals/42/bb/15/42bb15d17230bdc100b38a6f76d71efd.gif

Untuk dapat melihat hasil sekaligus dengan source codenya: Codepen. codepen

Dokumentasi lengkap dapat diliat pada https://github.com/mattboldt/typed.js.

Sumber :

Dilihat kali

Is this helpful?

Share This Post