Membuat Animasi Mengetik Di WordPress (CSS Only & Javascript)

TokoDaring.Com – Membuat Animasi Mengetik Di WordPress (CSS & Javascript). Ingin membuat ramai suasana website eCommerce WordPress dengan membuat sebuah animasi ? Bisa, ada dua cara yang bisa dilakukan untuk membuat sebuah animasi. Yaitu animasi mengetik dihalaman situs website WordPress anda.

Membuat animasi mengetik di WordPress

Membuat website toko daring menggunakan WordPress dan WooCommerce memang menjadi pilihan yang tepat bagi kalangan non-developer. Meski tidak harus menguasai skill coding, WordPress dan WooCommerce cukup ampuh dan menjadi pilihan kalangan usaha kecil untuk mengembangkan usahanya.

Kita tau bahwa usaha kecil dan menengah mungkin memiliki keterbatasan pada sumber daya dibidang IT. Namun itu tidak membatasi anda untuk menambahkan fitur-fitur yang tidak membuat pengunjung atau kustomer menjadi bosan ketika mengunjung toko online anda.

Membuat halaman website eCommerce menjadi lebih ‘enak di lihat’, misalnya dengan membuat slider, efek transisi atau bahkan animasi mengetik. Animasi semacam itu (mengetik) biasanya sering diaplikasikan pada jenis website eCommerce dibidang usaha kreatif.

Mungkin saja ada diantara anda yang menjalankan usaha printing on demand, atau usaha kreatif lainnya.

Untuk memperluas website eCommerce dengan basis WordPress dan WooCommerce biasanya bisa dilakukan dengan menginstall plugin atau extension. Cukup cari dan install plugin dari halaman plugin repository WordPress.Org, lalu temukan plugin yang tepat dan pasangkan diwebsite anda.

Namun bukan itu tujuan dari artikel ini, anda tentu bisa menambah kemampuan website eCommerce anda dengan kreatifitas anda sendiri. Yaitu dengan menambahkan kode atau script kustom. Pada artikel ini ‘Membuat Animasi Mengetik Di WordPress’, kami paparkan dengan menggunakan kode Javascript dan CSS.

Membuat animasi mengetik di WordPress dengan Javascript

Berikut adalah contoh script mengetik, anda mungkin bisa menempatkannya dimana saja dibagian situs websit anda. Misalnya pada bagian seksi hero agar terlihat menjadi lebih hidup. Dengan kode javascript kita bisa animasi mengetik di WordPress dengan sangat mudah.

Contoh berikut adalah, animasi mengetik yang baru dimulai ketika tombol di klik. Kita tentu bisa menyesuaikan agar proses mengetik itu bisa di mulai tanpa harus menekan tombol.

Untuk membuat animasi mengetik seperti diatas disatu halaman website anda, gunakan blok HTML. Lalu coba ketikan kode berikut. Tentang bagaimana menyematkannya, kunjungi artikel kami berikut, cara menambahkan javascript di WordPress.

<style>
.membuat-animasi-mengetik-js{border:1px solid red;background-color:#31669b;padding:2px;margin-bottom:2em;}

p.demomengetik{color:#fff;}
</style>

<!–– Membuat animasi mengetik di WordPress (JS) TokoDaring.Com ––>

<div class=".membuat-animasi-mengetik-js">
<button onclick="mengetik()">Mulai</button>

<br>
<p id="demomengetik"></p>

<script>
var i = 0;
var txt = 'TokoDaring.Com adalah media publikasi online berbasis website (web based). Kami menerbitkan artikel-artikel yang praktis dan andal bagi anda yang ingin terjun kedalam bisnis eCommerce.';
var speed = 50;

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

• var txt = 'TokoDaring.Com adalah bla bla bla ' adalah variabel berupa teks yang ingin diketikan.
• var speed = 50; adalah kecepatan mengetik satu huruf dalam satuan milidetik.
• Proses animasi mengetik baru mulai di lakukan ketika ada user yang mengklik tombol <button onclick="mengetik()">Mulai</button>.
  • Properti onclick adalah event handler untuk memproses event klik pada sebuah elemen.

Tentu saja kita bisa membuat proses mengetik di mulai tanpa harus user melakukan klik tombol terlebih dahulu.

Membuat animasi mengetik di WordPress dengan CSS

Cara lainnya yang lebih simple adalah membuat animasi mengetik di halaman WordPress hanya menambahkan kode CSS. Cara ini dinilai lebih ringan karena penggunaan kode CSS yang dianggap lebih ringan diproses jika dibandingkan dengan kode javascript.

Misalnya dengan contoh sebagai berikut :

Untuk membuat animasi tersebut berjalan, gunakan blok HTML lalu masukan kode berikut. Tentang properties CSS @keyframes bisa dilihat di https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp.

<style>
.membuat-animasi-mengetik-css{border:1px solid red;background-color:#31669b;padding:2px;margin-bottom:2em;}

.membuat-animasi-mengetik-css h2{
overflow:hidden;
border-right:3px solid orange;
white-space:nowrap;
animation:typing 3.5s steps(30, end), blink-caret .5s step-end infinite;}

@keyframes typing {from{width:0} to {width:100%}}
@keyframes blink-caret {from, to {border-color:transparent} 50% {border-color:orange}}
</style>

<!–– Membuat animasi mengetik di WordPress (CSS) TokoDaring.Com ––>

<div class="membuat-animasi-mengetik-css">
  <h2>TokoDaring.Com adalah media publikasi online berbasis website (web based).</h2>
</div>

Mengontrol animasi mengetik di WordPress dengan file fungsi PHP

Contoh diatas sebenarnya dilakukan dengan menuliskan script secara langsung dihalaman dimana element animasi ingin ditampilkan.

Selain itu membuat animasi mengetik tentu bisa dikontrol dari file function.php child theme atau melalui gunakan plugin editor dengan mengkatrol hook wp_enqueue_scripts().

Artikel terkait :