Selasa, 04 Januari 2011

Typing Text Script

Dalam artikel ini, saya akan menjelaskan bagaimana cara membuat efek teks diketik.
Efek teks ini dibuat dengan bantuan JavaScript yaitu "Typing Text Script" buatan Dynamic Drive

Contoh 1

Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu adalah nama Maori untuk sebuah bukit setinggi 305 meter, dekat dengan Porangahau, di selatan Waipukurau di selatan Hawke's Bay, Selandia Baru. Nama ini sering dipendekkan sebagai Taumata oleh penduduk setempat agar mudah dilafalkan.
Contoh 2
Liger, lion-tiger, adalah anakan raja hutan afrika (Panthera leo) dengan indukan ratu rimba asia (Panthera tigris) yang dikawin silangkan Liger pertama kali lahir di duna di Hagenpark, Hamburg, pada 11 Mei 1897, sedangkan di indonesia baru-baru ini lahir di Denpasar, Bali. Liger sebagai sebutan ilmiah mahluk blasteran ini sebetulnya kejadian cukup istimewa. Sebab liger ini istilah paten bagi anakan singa jantan dan harimau betina, kalau harimau jantan dan singa betina nama blasterannya bernama "Tigon" alias tiger - lion. Namun anakan campuran tigon itu jarang terjadi dan jarang berumur panjang. Liger juga merupakan big-cat terbesar didunia.


Kelebihan dari Typing Text Script ini adalah kode HTML ikut terketik juga, contohnya link, anda dapat mencobanya sendiri.


Bagaimana cara membuatnya?
  • Buka Tata Letak > Edit HTML
  • Taruh kode berikut diatas tag </head>
<script src="http://www.dynamicdrive.com/dynamicindex10/TypingText.js" type="text/javascript">

/****************************************************
* Typing Text script- By Twey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
</script>

  • Klik save
Untuk memunculkan efeknya, taruh kode berikut sesuai keinginan anda, contoh, didalam artikel, sebagai widget, dll.

<div id="example1">Taruh teks disini untuk efek pertama</div>

<p id="example2">Taruh teks disini untuk efek kedua</p>

<script type="text/javascript">
//Define first typing example:
new TypingText(document.getElementById("example1"));

//Define second typing example (use "slashing" cursor at the end):
new TypingText(document.getElementById("example2"), 100, function(i){ var ar = new Array("\\", "|", "/", "-"); return " " + ar[i.length % ar.length]; });

//Type out examples:
TypingText.runAll();
</script>

Jika anda ingin menggunakan efek pertama (tidak ada tanda slash yang mengikuti diakhir), ganti teks berwarna merah dan hapus teks berwarna biru.

Jika anda ingin menggunakan efek kedua (dengan tanda slash yang mengikuti diakhir), ganti teks berwarna biru dan hapus teks berwarna merah.

2 komentar:

gan kok ane kagak bisa pasang di blog saya ya, kendalanya di step ke2 gan, tolong dijelasin terperinci lagi, thank's,.

kk harus pilih salah satu.. kalau yang merah gak ada garis diujungnya. kalau biru ada.

Posting Komentar

Share My Blog

Twitter Delicious Facebook Digg Stumbleupon Favorites More