Trik Membuat Scroller Typed Text Area!!

Nah... dari judulnya udah tau dunk apa maksudnya?? ya.. kali ini gw pengen kasih tau trik cara membuat text area dengan gaya ketikan atau mengetik (typed), jadi text yang ditampilkan secara otomatis seperti seseorang yang sedang mengetik... pengen tau cara buatnya?? yo disimak aja!

Cara mudah kok sobat, cukup masukan kode berikut di tempat yang ingin sobat tampilkan teksnya

<form name="news">
<textarea name="news2" cols=50 rows=3 wrap=virtual></textarea>
</form>

<script language=JavaScript>

var newsText = new Array();
newsText[0] = "Masukan teks pertama";
newsText[1] = "Masukan teks kedua";
newsText[2] = "Masukan teks ketiga";
newsText[3] = "Masukan teks keempat";
newsText[4] = "Masukan teks kelima";
newsText[5] = "Masukan teks keenam";
var ttloop = 1; // Repeat forever? (1 = True; 0 = False)
var tspeed = 50; // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds

// ------------- NO EDITING AFTER THIS LINE ------------- \\
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>

NB: warna biru adalah ukuran kotak teks area yang ingin dibuat (Lebar dan tinggi), warna merah adalah pesan teks yang ingin dibuat, warna hijau adalah kecepatan mengetik (typing), dan warna ungu adalah jeda antara teks yang satu dengan teks yang lain

selamat mencoba sobat ^_^




Bagi yang ingin copy paste jangan lupa di sertai back link ke situs ini dan sumber.

Author : velshadow

On : 23 Juni 2009


silahkan berkomentar dengan sopan.