Membuat Text/Tulisan Berjalan Berubah Warna

Ada banyak cara untuk membuat animasi pada website/blog, bisa saja kita memberi ruang untuk file GIF, SWF/FLASH, VIDEO LOOP, atau MARQUEE TEXT. Marquee text adalah animasi paling sederhana yang bisa kita buat pada ruang website/blog kita, penggunaannya bisa sebagai ucapan selamat datang, informasi atau iklan, bahkan bisa kita pergunakan sebagai gadget yang mempercantik website/blog kita.

Ada juga beberapa cara membuat marquee text, banyak sekali yang tersedia di blog-blog tutorial, tetapi yang paling saya suka adalah "Membuat Text/Tulisan Berjalan Berubah Warna" ini. Script-nya ada dibawah ini :

<div style="padding:1px 1px; border:0px solid blue; font-size:25px; font-family:Arial Black;font-weight:bolder;"> <marquee behavior="scroll" direction="left" onmouseover="stop" onmouseout="run" scrollamount="8" width="900px"> <script type="text/javascript" > var message="Agatha Nicole Belajar Blogging, Sambil Belajar Mengapa Tak Berbagi Apa Saja Yang Dipelajari..... " var bgsGR1color="Red" /* Warna utama teks */ var bgsGR2color="Green" /* Warna teks flash pertama */ var bgsGR3color="Blue" /* Warna teks flash ke dua */ var flashspeed=20 // kec. ganti warna (1/1000 dt) var flashingletters=50 // jumlah teks pertama var flashingletters2=50 // jumlah berwarna teks ke dua var flashpause=30 // waktu jeda pergantian warna (1/1000 dtk) var n=0 if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>')}else document.write(message) function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++) crossref(m).style.color=bgsGR1color} crossref(n).style.color=bgsGR2color if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color if (n<message.length-1) n++ else{n=0 clearInterval(flashing) setTimeout("beginneon()",flashpause) return}} function beginneon(){if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed)} beginneon() </script></marquee></div>
Penempatannya terserah bisa dimana saja, di header, body, sidebar atau footer tergantung kebutuhan kita. Kita tinggal menambahkan gadget HTML di ruang yang kita suka, simpel dan lumayan bagus.

Ket :
Yang paling banyak dirubah pada script ini adalah ;
font-size:25px -> Rubahlah sesuai dengan media/ruang yang akan diletakkan.
width="900px" -> Rubahlah sesuai dengan media/ruang yang akan diletakkan.
 var bgsGR1color="Red" /* Warna utama teks */  -> Rubahlah warna sesuai keinginan anda. 
var bgsGR2color="Green" /* Warna teks flash pertama */  -> Rubahlah warna sesuai keinginan anda.
var bgsGR3color="Blue" /* Warna teks flash ke dua */ -> Rubahlah warna sesuai keinginan anda.
var flashspeed=20 // kec. ganti warna (1/1000 dt) -> Rubahlah Kecepatannya sesuai keinginan anda.

Sumber Script : http://helplogger.blogspot.com/

Belajar Berbagi

Read more »