cara membuat animasi auto typing menggunakan javascript di blog

Membuat Animasi Auto Typing Text Menggunakan JavaScript - Kalo kita bicara mengenai animasi, pastinya kita akan lagsung merasa penasaran dan ingin segera melihat atau bahkan mengetahuinya. Nahh, kali ini saya akan share tentang cara membuat animasi auto typing text menggunakan JavaScript. Animasi auto typing text di sini maksudnya adalah animasi ketikan otomatis (mengetik sendiri), artinya tulisan yang sudah kita siapkan akan secara otomatis mengetik sendiri (muncul satu persatu dengan sendirinya).

Masih bingung? Kalo begitu langsung saja kita menuju ke tutorial cara membuat animasi auto typing text menggunakan JavaScript berikut ini... Silahkan bisa anda simak lalu ikuti dengan baik dan seksama!

Animasi auto typing text menggunakan JavaScript ini bisa anda letakkan di dalam postingan ataupun di sidebar sebagai widget eksternal. Jadi anda tidak usah kebingungan karena mau di letakkan di mana saja bisa. Caranya anda tinggal copy/salin script kode di bawah ini lalu pastekan di tempat yang anda inginkan.

ok,..gyus,.langsung aja menuju ke TKP,..
ini kodenya di bawah,..

<form name="news">

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

</form>

<script type="text/javascript">

//<![CDATA[

var newsText = new Array();

newsText[0] = "hy,..selamat datang di blog ivank gribatako!";

newsText[1] = "Anda Sedang Membaca Artikel Tentang:";

newsText[2] = "Membuat Animasi Auto Typing Text";

newsText[3] = "Semoga Bermanfaat Bagi Sobat Semua...";

newsText[4] = "Dan Selamat Mencoba!";

newsText[5] = "Jangan Lupa Tinggalkan Komentar Sobat...";

var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False)

var tspeed = 100; // 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>


catatan
Untuk value (isi) dari newsText[0] sampai dengan newsText[5] bisa anda ganti dan sesuaikan dengan keinginan anda sendiri.

dan lihatlah hasilnya di bawah ini,... 




Like the Post? Share with your Friends:-

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Digg
• LinkedIn
• Reddit
• Delicious
• Technorati