Membuat Efek Mengetik Pada Text Menggunakan Javascipt
Hallo teman-teman Source Code Aplikasi. Kembali lagi dengan saya Shelli Ripati di Kursus Website. Kali ini saya akan membahas mengenai cara Membuat efek Mengetik Pada Text Menggunakan Javascript. Dimana nanti kita akan membangun text muncul satu persatu seperti terlihat efek mengetik.
Langkah pertama-tama bagi Membuat Efek Mengetik Pada Text Menggunakan Javascript ialah membangun struktur htmlnya terlebih dahulu, seperti di script di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Membangun Efek Mengetik Di Tulisan Menggunakan Javascipt</title>
</head>
<body>
<div class=container>
<h1>Membangun Efek Mengetik Di Tulisan Menggunakan Javascipt</h1>
<button onclick=typeWriter()>Klik</button>
<p id=demo></p>
</div>
</body>
</html>
Sekiranya telah selesai karenanya teman-teman dapat tambahkan style cssnya dan taruh di pada head, scriptnya selaku berikut ya teman-teman.
<style type=text/css> <br> body{background: salmon}
.container{width: 600px; margin: auto;}
</style>Lalu langkah terakhir kita bikin script javascriptnya dan tempatkan di atas penutup tag body ya teman-teman. Scriptnys selaku 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>
Sekiranya telah selesai seluruh karenanya teman-teman jangan lupa di save terlebih dahulu ya dengan format dot html. Teman-teman dapat perhatikan script di atas. Settimeoutnya teman-teman dapat ubah dengan cara mengubah nilai dari variable speed sesuai keinginan teman-teman. Sekiranya teman-teman jalankan di browser masing-masing karenanya efek mengetik di text yang kita bikin di variable txt akan muncul satu persatu ketika kita mengkllik button yang telah kita bikin di html.
Demikian artikel mengenai cara Membuat efek Mengetik Pada Text Menggunakan Javascript. Hingga jumpa di artikel berikutnya ya teman-teman. Semoga bermanfaat dan selamat mencoba teman-teman.
Sumber https://kursuswebsite.org
