Posted on

2 Cara Membuat Animasi Mengetik WordPress (Javascript dan CSS)

Membuat Animasi Mengetik WordPress

wpJakarta.Com – 2 Cara Membuat Animasi Mengetik WordPress (Javascript dan CSS). Ingin membuat animasi mengetik di website WordPress tanpa plugin ? Bisa, di artikel ini ada dua cara yang kami berikan untuk membuat animasi mengetik WordPress. Yaitu dengan kode javascript dan kode CSS.

Tips-trik Dan Tutorial WordPress

Membuat animasi mengetik WordPress

Membuat website menggunakan WordPress memang jadi pilihan yang tepat bagi kalangan non-developer. Meski tidak harus menguasai skill coding. WordPress juga bisa menjadi pilihan bagi kalangan usaha kecil untuk mengembangkan usahanya. Kita tau bahwa sumber daya usaha kecil mungkin terbatas pada bidang IT. Namun kenyataannya website WordPress bisa di buat bahkan dengan fitur-fitur yang tidak membuat pengunjung menjadi bosan. Atau membuat halaman WordPress jadi “enak di lihat”. Misalnya membuat slider, efek transisi bahkan animasi mengetik. Cukup cari dan install plugin dari halaman plugin repository WordPress.Org. Temukan plugin yang tepat dan pasang di website anda.

Tips-trik Dan Tutorial WordPress lainnya

Membuat animasi mengetik WordPress dengan Javascript

Pada artikel ini mungkin anda ingin membuat animasi mengetik. Misalnya ketika ingin membuat seksi hero jadi terlihat lebih hidup. Contohnya mungkin bisa dilihat pada halaman kami “Write For All”. Efek mengetik tersebut dibuat dengan kombinasi HTML dan javascript sebagai berikut :

<button onclick="mengetik()">Mulai</button>
<p id="demoMengetik"></p>
<script>
var i = 0;
var txt = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper elementum sodales. Nam vulputate a justo eget euismod. Suspendisse nec congue mi. Phasellus ut ipsum commodo, vestibulum erat egestas, malesuada nibh. Pellentesque euismod nunc in mattis viverra.';
var speed = 50;

function mengetik() {
  if (i < txt.length) {
    document.getElementById("demoMengetik").innerHTML += txt.charAt(i);
    i++;
    setTimeout(mengetik, speed);
  }
}
</script>

Selengkapnya tentang kode tersebut lihat halaman kode snippet kami di https://wpjakarta.com/snippet/javascript/kode-javascript-membuat-animasi-mengetik-wordpress/. var txt = 'Lorem ipsum dolor sit amet' adalah teks yang ingin di ketikan. var speed = 50; adalah kecepatan mengetik huruf (satu huruf) dalam milidetik. Proses animasi mengetik baru mulai di lakukan ketika ada user yang mengklik tombol <button onclick="mengetik()">Mulai</button> . Tentu saja kita bisa membuat proses mengetik di mulai tanpa harus user melakukan klik tombol terlebih dahulu. Lihat halaman snippet kami tentang skrip mengetik.

Tips-trik Dan Tutorial WooCommerce

Membuat animasi mengetik WordPress dengan CSS

Cara lainnya membuat animasi mengetik WordPress adalah dengan hanya menambahkan kode CSS. Cara ini lebih simple dan lebih ringan. Karena tidak ada kode javascript yang perlu di eksekusi. Misalnya hanya dengan menambahkan class <div> lalu menambahkan style css properties ke element <div> tersebut.

<div class="mengetik-css">
  <h1>wpJakarta - a Non Open BO Company!</h1>
</div>

Lalu menambahkan style css menggunakan selector .mengetik-css.h1 dengan properties @keyframes typing. Kode CSS selengkapnya untuk membuat animasi mengetik WordPress dengan kode CSS, lihat di halaman berikut. Kode CSS Membuat Animasi Mengetik WordPress.

.mengetik-css.h1 {

 // kode css
}

@keyframes typing {
 // kode css
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  // kode css
}

Artikel lainnya