Hai.. Sobat Jumpa lagi dengan
Semua Tentang Cara Kali ini saya akan berbagi
tentang
Cara Membuat Animasi Typing Text Drngan JavaScript . Pengertian
animasi, di sini adalah : Gambar atau Tulisan ( Text ) Bergerak atau berjalan sendiri dengan seikit JavaScript . Animasi auto typing text maksudnya adalah Tulisan bergerak atau muncul satu persatu sengan sendiri nya ( mengetik otomatis ), dengan tulisan yang sudah kita siapkan.Begitulah kira kira penjelasan nya .
Langsung saja kita menuju ke tutorial
Cara Membuat Animasi Typing Text Dengan JavaScript berikut ini... Silahkan bisa anda simak lalu ikuti dengan baik dan seksama!
Animasi 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 copas kode script di bawah ini lalu pastekan di tempat yang sobat inginkan.
<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] = "Hello Sobat Blogger!";
newsText[1] = "Artikel anyar dari Semua Tentang Cara :";
newsText[2] = "Cara Membuat Animasi Auto Typing Text Dengan JavaScript ";
newsText[3] = "Semoga Bermanfaat Bagi Sobat Semua...";
newsText[4] = "Jangan Lupa Tinggalkan Komentar";
newsText[5] = "Dan Selamat Mencoba!";
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>
Hasilnya
kira kira seperti ini:
Catatan :
Untuk value (isi) dari
newsText[0] sampai dengan
newsText[5] bisa anda ganti dan sesuaikan dengan keinginan anda sendiri.
Sampai di sini dulu berbagi tentang Cara
Membuat Animasi Auto Typing Text Dengan JavaScript ini, semoga bermanfaat untu kita semua....!