Membuat efek Mengetik Pada Text Menggunakan Javascript

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Website. Kali ini saya akan membahas tentang cara Membuat efek Mengetik Pada Text Menggunakan Javascript. Dimana nanti kita akan membuat text muncul satu persatu seperti terlihat efek mengetik.

Langkah pertama untuk Membuat Efek Mengetik Pada Text Menggunakan Javascript adalah membuat struktur htmlnya terlebih dahulu, seperti pada script di bawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Efek Mengetik Pada Tulisan Menggunakan Javascipt</title>
</head>
<body>
	<div class="container">
		<h1>Membuat Efek Mengetik Pada Tulisan Menggunakan Javascipt</h1>
		<button onclick="typeWriter()">Klik</button>
		<p id="demo"></p>
	</div>
</body>
</html>

Jika sudah selesai maka teman-teman bisa tambahkan style cssnya dan taruh di dalam head, scriptnya sebagai berikut ya teman-teman.

<style type="text/css">    <br>    body{background: salmon} 
    .container{width: 600px; margin: auto;} 
</style>

Lalu langkah terakhir kita buat script javascriptnya dan tempatkan di atas penutup tag body ya teman-teman. Scriptnys sebagai berikut ya teman-teman.

 <script>    
        var i = 0;
	var txt = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ';
	var speed = 100;

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

Jika sudah selesai semua maka teman-teman jangan lupa di save terlebih dahulu ya dengan format dot html. Teman-teman bisa perhatikan script di atas. Settimeoutnya teman-teman bisa ubah dengan cara mengubah nilai dari variable speed sesuai keinginan teman-teman. Jika teman-teman jalankan di browser masing-masing maka efek mengetik pada text yang kita buat di variable txt akan muncul satu persatu ketika kita mengkllik button yang sudah kita buat di html.

Demikian artikel tentang cara Membuat efek Mengetik Pada Text Menggunakan Javascript. Sampai jumpa di artikel selanjutnya ya teman-teman. Semoga bermanfaat dan selamat mencoba teman-teman.

Membuat Efek Mengetik Pada Text Menggunakan Javascipt

Kategori