Website yang interaktif tentunya akan memberikan pengalaman yang berkesan kepada pengunjung website tersebut. Dan salah satu cara membuat website interaktif adalah dengan menggunakan JavaScript.

Bagi Anda yang mungkin belum mengetahui, JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif.

Salah satu animasi JavaScript yang cukup simple dan tidak terlalu berlebihan adalah animasi auto typing (mengetik).

Dengan menggunakan TypeIt.js memungkinkan Anda membuat animasi typing di WordPress dengan mudah dan hanya menggunakan beberapa baris kode saja.

Apa Itu TypeIt.js

The most versatile animated typing utility on the planet.

https://typeitjs.com

TypeIt.js adalah sebuah plugin JavaScript yang memberikan efek animasi mengetik secara otomatis. Dengan menggunakan TypeIt, Anda dapat membuat animasi mengetik dengan mudah.

Anda bisa membuat efek untuk satu kalimat yang sederhana seperti ini:

Ayo bikin website impianmu…

Atau menampilkan beberapa baris kalimat seperti ini:

Membuat animasi typing di WordPress itu mudah.
Lanjutkan membaca untuk mengetahui caranya.

Atau efek dinamis seperti ini:

Semua animasi tersebut dapat dengan mudah Anda buat dengan menggunakan TypeIt.

Menggunakan TypeIt.js di WordPress

Untuk membuat animasi typing di WordPress, Anda harus menambahkan kode JavaScript TypeIt kedalam WordPress. Pada umumnya Anda harus menambahkan kode tersebut di file function.php.

Menambahkan kode di funtion.php cukup beresiko karena jika ada kesalahan sedikit bisa jadi website Anda malah tidak bisa diakses.

Tapi Anda tidak perlu khawatir, ada cara yang lebih mudah untuk menambahkan kode di WordPress tanpa mengubah file function.php. Anda bisa menggunakan plugin Code Snippets untuk menambahkan kode di WordPress. Dengan menggunakan plugin ini, Anda bisa menmbahkan kode PHP, CSS, atau JavaScript dengan mudah.

Dengan menggunakan plugin Code Snippets ini, Anda bisa menambahkan kode yang diperlukan untuk membuat animasi typing di WordPress.

Jika ingin menggunakan TypeIt di WordPress Anda perlu untuk mengunduh file TypeIt di alamat berikut. Untuk mempermudah Anda, Ayo Bikin Website telah menyederhanakan prosesnya. Anda cukup mengunduh file berikut dan menggunakannya langsung di plugin Code Snippets.

Membuat Animasi Typing di WordPress

1. Install Plugin Code Snippets

Langkah pertama yang diperlukan untuk membuat animasi typing di WordPress adalah install plugin Code Snippets.

Sama seperti cara menginstal semua plugin yang ada di direktori plugin WordPress, Anda perlu login ke dashboard untuk menginstal plugin Code Snippets.

Code Snippet
  1. Dari dashboard klik App Plugins kemudian klik Add New.
  2. Ketik Code Snippets di kolom pencarian.
  3. Klik Install kemudian klik Activate.

Kami memiliki tutorial lengkap cara menginstall plugin jika Anda ingin mengetahui langkah detail dalam menginstall plugin.

2. Masukkan Kode TypeIt.js di WordPress

Setelah Anda mengaktifkan plugin Code Snippets, buat snippet baru. Copy isi file yang telah Anda download tadi (Anda bisa klik disini untuk download filenya), kemudian paste di bagian Code.

Add New Snippet

Pilih opsi Only run on site front-end dan beri nama snippet yang baru saja Anda buat dan klik Save Changes and Activate.

Buat satu lagi snippet baru. Copy kode di bawah ini dan paste di snippet yang Anda buat.

add_action( 'wp_footer', function () { ?>
<script>

	new TypeIt(".type-single", {
		speed: 80,
		waitUntilVisible: true,
		loop: true,
		loopDelay: 5000
	})
	.go();

</script>
<?php } );

3. Gunakan TypeIt.js di Post/Page

Penggunaan TypeIt sangat mudah, Anda cukup membuat konten seperti biasa. Anda perlu menambahkan class pada kalimat yang ingin Anda beri animasi. Untuk melakukannya Anda perlu untuk mengubah tampilan konten tersebut kedalam HTML.

Jangan khawatir, hal ini cukup mudah dilakukan.

Animasi Typing di WordPress

Yang perlu diperhatikan adalah nama class yang Anda gunakan harus sama dengan yang ada pada baris berikut:

new TypeIt(".type-single", {

Jika Anda menggunakan “.type-single” maka nama class yang harus Anda tambahkan adalah type-single.

Jika Anda ingin efek animasinya terjadi pada beberapa kalimat maka Anda hanya perlu menambahkan <br> pada setiap akhir kalimat.

Snippet

Karena pada contoh diatas menggunakan class “type-multi” maka kode snippet Anda juga harus disesuaikan menjadi:

add_action( 'wp_footer', function () { ?>
<script>

	new TypeIt(".type-multi", {
		speed: 80,
		waitUntilVisible: true,
		loop: true,
		loopDelay: 5000
	})
	.go();

</script>
<?php } );

Setelah Anda mempublikasikan konten Anda, maka Anda akan dapat melihat animasi typing di WordPress Anda. Selamat Anda telah membuat animasi pertama Anda!

Kesimpulan

Dengan menggunakan TypeIts.js Anda bisa membuat efek animasi typing di WordPress dan membuat website Anda menjadi lebih menarik.

Cara menggunakan TypeIt di WordPress pun cukup mudah untuk dilakukan. Selain itu, TypeIt juga memberikan banyak variasi animasi yang bisa digunakan untuk membuat website menjadi dinamis.

Bagaimana, tertarik untuk membuat website Anda menjadi lebih menarik?

Silahkan tulis di kolom komentar jika Anda mengalami kesulitan untuk menggunakan TypeIt di WordPress.

Artikel Terkait

Leave a Reply

Your email address will not be published. Required fields are marked *