Typed.js, Efek Mengetik pada Javascript

4.84/5 (31)

TypedJS, Efek Mengetik pada Javascript – Kadang kita perlu mempercantik atau memperindah tampilan website kita. Tentunya ada banyak cara untuk melakukan hal tersebut. Menambahkan efek partikel, misalnya. Sebagai tambahan cara untuk merombak tampilan website, pada artikel ini kita akan belajar Membuat Efek Mengetik pada Javascript menggunakan Typed.js

Apa itu Typed.js?

Dikutip dari halaman resmi nya, Typed.js adalah library javascript buatan Matt Boldt yang dibuat untuk memudahkan kita memberi efek mengetik pada halaman website. Dengan menggunakan library ini, kita bisa membuat efek mengetik pada string apa saja, dan perhatikan jenisnya sesuai kecepatan yang bisa kalian atur, menghapus apa yang diketik, dan memulai kalimat baru untuk sejumlah string yang telah kalian tetapkan.

Cara menginstall Typed.js ini cukup mudah, dan juga bisa dilakukan melalui beberapa pilihan sebagai berikut:

  • Menggunakan CDN.
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
  • Download file ZIP dari situs resminya. Download ZIP.
  • Package manager pada Command prompt/Terminal:
    npm install typed.js
    yarn add typed.js
    bower install typed.js

Cara Menggunakan Typed.js

Sekarang kita coba mempraktekkan penggunaan Typed.js. Sebagai contoh, kita akan menggunakan CDN untuk memanggil Typed.js, letakkan code berikut di dalam tag <head>,

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

Karena jika hanya halaman kosong dengan tambahan teks yang mengetik sendiri, kita akan menambahkan sedikit CSS sebagai bumbu,

@import url(https://fonts.googleapis.com/css?family=Lato);

html {
  height: 100%;
}

body {
  background-color: #131313;
  font-family: 'Lato', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

h1 {
  color: #ffffff;
  font-size: 4em;
}

.typed {
  border-bottom: 2px solid #ffffff;
}

.typed-cursor{
   opacity: 1;
   animation: blink 0.7s infinite;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

Setelah CSS, langkah selanjutnya adalah membuat tag untuk teks yang ingin diberi efek mengtik nantinya, disini saya menggunakan tag <h1>,

<h1>Belajar <span id="typed" class="typed"></span></h1>

Sekarang waktunya kita menambahkan script Typed.js. Karena hanya untuk demo, saya akan membuat efek mengetik yang nantinya hanya akan menambahkan, dan menghapus suatu string. Tambahkan kode di bawah ini kedalalam tag <script>.

new Typed('#typed',{
  strings : ['HTML','CSS','BOOTSTRAP','JAVASCRIPT'],
  typeSpeed : 100,
  delaySpeed : 100,
  loop : true
});

Dokumen lengkap tentang penggunaan Typed.js bisa kalian lihat disini.

Apa saja fungsi dari baris – baris kode tersebut? Pada script di atas, saya membuat variabel typed yang berisi function Typed().  Di dalam function Typed() saya memanggil tag ber-id typed untuk parameter pertama. Untuk parameter kedua saya gunakan untuk settingan efek yang akan tampil pada halaman website,

  1. strings : [‘blabla’] untuk mengatur kata yang akan ditampilkan.
  2. typeSpeed : x untuk mengatur kecepatan efek mengetik.
  3. delaySpeed : x untuk mengatur waktu jeda tiap pergantian kata.
  4. loop : true untuk mengulan pergantian kata terus-menerus.

Untuk demo tampilan dari script diatas, silahkan lihat di bawah ini atau di subdomain Archive milik Codelatte.

See the Pen Demo Menggunakan Typed.JS by Abay (@abaykan) on CodePen.

Sekian artikel tentang Typed.js, untuk Matt Boldt, terima kasih telah membaut library Javascript yang memudahkan kami untuk membuat efek mengetik pada halaman website. Sekian artikel singkat kali ini, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *