Cara Membuat Typing Animation Text Menggunakan Javascript

1. Buat pos baru atau widget

2. Masukkan kode berikut:

<script language="JavaScript">
 var newsText = new Array();
 newsText[0] = "Enter text disini";
 newsText[1] = "ini text kedua";
 newsText[2] = "yang ini ketiga";
 newsText[3] = "ke - empatnya";
 newsText[4] = "by http://artdev-x.blogspot.com/"
 var ttloop = 1;    // Repeat forever? (1 = True; 0 = False)
 var tspeed = 100;   // Typing speed in milliseconds (larger number = slower)
 var tdelay = 5000; // Time delay between newsTexts in milliseconds

 var dwAText, cnews=0, eline=0, cchar=0, mxText;

function doNews() {
 mxText = newsText.length - 1;
 dwAText = newsText[cnews];
 setTimeout("addChar()",1000)
}
function addNews() {
 cnews += 1;
 if (cnews <= mxText) {
   dwAText = newsText[cnews];
   if (dwAText.length != 0) {
     document.news.news2.value = "";
     eline = 0;
     setTimeout("addChar()",tspeed)
   }
 }
}
function addChar() {
 if (eline!=1) {
   if (cchar != dwAText.length) {
     nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
     document.news.news2.value = nmttxt;
     cchar += 1;
     if (cchar != dwAText.length) document.news.news2.value += "_";
   } else {
     cchar = 0;
     eline = 1;
   }
   if (mxText==cnews && eline!=0 && ttloop!=0) {
     cnews = 0; setTimeout("addNews()",tdelay);
   } else setTimeout("addChar()",tspeed);
 } else {
   setTimeout("addNews()",tdelay)
 }
}

doNews()
</script>

<form name="news">
 <input type="text" name="news2"  wrap=virtual  readonly="readonly" />
</form>

3. Simpan/Publish

Hasilnya:

Happy Blogging!

Judul: Cara Membuat Typing Animation Text Menggunakan Javascript; Ditulis oleh Unknown; Rating Blog: 5 dari 5