Cara membuat efek tulisan ketikan ( typewritting ) dengan CSS dan JS

Cara membuat efek tulisan ketikan ( typewritting ) dengan CSS dan JS

Typewritting atau tulisan dengan cara diketik dapat dibuat menggunakan dengan dua cara yaitu dengan :

1. JavaScript dan
2. CSS

Nah untuk yang pertama mimin akan berbagi caranya dengan kode Javascriptnya terlebih dahulu
dengan penjelasan kode berikut :

• setTimeout("type()", 5000) Merupakan kode waktu pengulangan munculnya ketikan
• startTyping(text, 200, "textDestination") Merupakan kode kecepatan 

Jadi untuk membuat tulisan dengan effek diatas dilahkan copy kode JS di bawah ini

<script language="JavaScript"> var text="Contoh Tulisan dengan efek ketikan bergerak dengan Javascript"; var delay=20; var currentChar=1; var destination="[none]"; function type() { //if (document.all) { var dest=document.getElementById(destination); if (dest)// && dest.innerHTML) { dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>"; currentChar++; if (currentChar>text.length) { currentChar=1; setTimeout("type()", 5000); } else { setTimeout("type()", delay); } } } } function startTyping(textParam, delayParam, destinationParam) { text=textParam; delay=delayParam; currentChar=10; destination=destinationParam; type(); } </script> <b></b><br /> <div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"> </div> <script language="JavaScript"> javascript:startTyping(text, 200, "textDestination"); </script> <textarea style="height: 160px; margin: 0px; width: 570px;">
Untuk keterangan menggunakan CSS silahkan disimak dibawah ini :

• font-size: 20px; Merupakan ukuran fontnya
• width: 100%; merupakan ukuran tampilan ketikannya
• -webkit-animation: typing 5s steps(100, end); merupakan kecepatan ketikannya

Jadi untuk membuat tulisan dengan effek diatas silahkan copy kode CSS di bawah ini
.robinhd { font-size: 20px; width: 100%; white-space:nowrap; overflow:hidden; -webkit-animation: typing 5s steps(100, end); animation: animasi-ketik 5s steps(100, end); } @keyframes animasi-ketik{ from { width: 0; } } @-webkit-keyframes animasi-ketik{ from { width: 0; } } <br />
kemudian tambahkan ini untuk memanggil fungsi CSS
<div class="robinhd"> Tulisan Kamu</div>

Tampilan efek menggunakan CSS hampir sama dengan JS jadi silahkan dipilih yang mana yang lebih mudah agan pakai.

Sekian untuk tutorial kita pada kali ini tetap kunjungi terus blog ini OK