mouse

Membuat Animasi Teks Terketik Otomatis


Ingin Membuat Animasi Teks terketik otomatis? caranya gimana? mudah kok... kita cuma butuh sedikit kode javascript disini. Animasi Tersebut bisa ditaruh di postingan blog sebagai pelengkap posting, atau di dekat header/sidebar sebagai pesan bagi pengunjung. bisa ditaruh dimana saja bahkan di saku anda sekalipun. Berikut Contohnya:

Teks ini terketik sendiri walaupun anda tidak menyentuh keyboard. bahkan jika anda sedang tidur sekalipun, teks ini akan terus mengetik, mengetik, dan mengetik tanpa henti sampai hari kiamat tiba. tapi sayangnya teks ini terlalu panjang saking panjangnya sampai memenuhi halaman posting di adjie brotot blog karena memenuhi maka javascript yang digunakan akan semakin banyak, oh iya, teks ini dibuat dengan javascript bukan dengan HTML semoga anda mengerti dan selamat menyaksikan tutoial ini dengan seksama, tapi sebelumnya ke kamar mandi dulu bagi yang kebelet dan |

Oke, Langsung saja. ini dia Kodenya:

<script language="JavaScript">
var text="TEKS ANDA DISINI";
var delay=10;
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=1;
destination=destinationParam;
type();
}
</script>
<b></b><br />
<div #ff0000;="" 0px;"="" 10px="" arial;="" color:="" font:="" id="textDestination" margin:="">
</div>
<script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>

Penjelasan:
MERAH=tuliskan teks anda disitu.
BIRU=selang waktu delay teks sebelum terketik dari awal lagi
KUNING=selang waktu antar karakter
_ (underscore)=karakter dibelakang teks. boleh diganti menjadi | atau ...

Boleh dikombinasikan sesuka hati anda.

Categories:
Comments
0 Comments

0 komentar:

Posting Komentar

 

Feedjit

Featured Posts