KursusKode - Menulis merupakan kegiatan sehari-hari bagi setiap individu yang memperlukannya. Pelajar memperlukan menulis untuk keperluan belajarnya, Pegawai kantor perlu menulis untuk menulis Draft penting sebagai catatan pekerjaanya,dll. Ketika menulis maka kita akan menggunakan tangan kita untuk memasukkan huruf satu per-satu ke setiap tulisan kata yang kita buat. Inilah yang menjadi landasan atau ide saya dalam membuat tutorial kali ini. Saya akan membahas tentang cara memasukkan kata yang kita sudah buat sebelumnya menjadi animasi yang secara otomatis memasukkan huruf satu-persatu sendiri ke dalam komponen HTML yang sudah kita buat sehingga menimbulkan efek animasi layaknya orang yang sedang mengetik.
jQuery akan memudahkan kita dalam membuat aplikasi pengetikan otomatis pada tutorial kali ini, jadi buat anda yang belum mempunyai jQuery harap sangat anda mendownloadnya terlebih dahulu di situsnya jQuery (jQuery.com).
Berikut demo aplikasi yang sudah jadi.
Sebelum membuat aplikasinya, siapkan dahulu komponen HTML yang akan anda buat. Buatlah sebuah file HTML dengan nama terserah anda, disini saya kasih contoh misal ketikOtomatis.html lalu simpan.
Dan buat juga sekaligus file script.js dan masukkan ke folder yang sama tempat anda menyimpan project anda.
Anda hanya perlu memasukkan file jQuery anda ke dalam satu folder dimana anda menyimpan file ketikOtomatis tadi yang sudah anda siap agar anda tidak perlu lagi mengedit bagian src= pada script diatas. Nah, sekarang saatnya anda menambahkan sebuah tag element div dengan id nya adalah "target". ID dengan nama target disini kita buat untuk penampung text yang akan kita buat menjadi auto ketik (otomatis mengetik).
Masukkan script dibawah ini sesudah tag <body>
Sekarang anda simpan.
Atau anda bisa melihat full source kode-nya dibawah ini.
File ketikOtomatis.html
Selamat mencoba.
jQuery akan memudahkan kita dalam membuat aplikasi pengetikan otomatis pada tutorial kali ini, jadi buat anda yang belum mempunyai jQuery harap sangat anda mendownloadnya terlebih dahulu di situsnya jQuery (jQuery.com).
Berikut demo aplikasi yang sudah jadi.
<!DOCTYPE html>
<html>
<head>
<title>ketikOtomatis jQuery [KursusKode]</title>
</head>
<body>
</body>
</html>
Dan buat juga sekaligus file script.js dan masukkan ke folder yang sama tempat anda menyimpan project anda.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
Anda hanya perlu memasukkan file jQuery anda ke dalam satu folder dimana anda menyimpan file ketikOtomatis tadi yang sudah anda siap agar anda tidak perlu lagi mengedit bagian src= pada script diatas. Nah, sekarang saatnya anda menambahkan sebuah tag element div dengan id nya adalah "target". ID dengan nama target disini kita buat untuk penampung text yang akan kita buat menjadi auto ketik (otomatis mengetik).
Masukkan script dibawah ini sesudah tag <body>
<div id="target"></div>
var kata = "Hai sobat KursusKode apa kabarmu hari ini?"; //Kata yang akan muncul
var inkata = 0; // Index kata
var kecepatanKataMuncul = 200; //Kecepatan huruf yang akan kita munculkan
setInterval(function(){
var target = $("#target"); //Inisialisasi div id target
target.append(kata[inkata]); //Memasukkan kata satu persatu ke html
inkata++; //index kata selalu bertambah
}, kecepatanKataMuncul); //Timing 200 ms perhuruf yang dimasukkan
Sekarang anda simpan.
Atau anda bisa melihat full source kode-nya dibawah ini.
File ketikOtomatis.html
<!DOCTYPE html>
<html>
<head>
<title>Hai sobat KursusKode</title>
</head>
<body>
<div id="target"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var kata = "Hai sobat KursusKode apa kabarmu hari ini?"; //Kata yang akan muncul
var inkata = 0; // Index kata
var kecepatanKataMuncul = 200; //Kecepatan huruf yang akan kita munculkan
setInterval(function(){
var target = $("#target"); //Inisialisasi div id target
target.append(kata[inkata]); //Memasukkan kata satu persatu ke html
inkata++; //index kata selalu bertambah
}, kecepatanKataMuncul); //Timing 200 ms perhuruf yang dimasukkan
Selamat mencoba.
Artikel nya keren.
BalasHapusKunjungi juga :
https://juniawan89.blogspot.com/2018/10/membuat-type-writer-dengan-jquery.html
Terimakasih
Komentar ini telah dihapus oleh pengarang.
BalasHapus