Beberapa variable dapat dirubah untuk mendapatkan efek animasi yang dirasa cocok.
- var message = tempat menuliskan teks
- var neonbasecolor, var neontextcolor, var neontextcolor2 = untuk membentuk variasi warna.
- var flashspeed = untuk merubah kecepatan animasi
var flashingletters, var flashingletters2 = mengatur jumlah teks warna-1 dan teks warna-2 - var flashpause = untuk mengatur lama waktu teks berhenti (pause) dalam milliseconds (ms).
<h3>
<script type="text/javascript">
//<![CDATA[
var message="Selamat datang dan selamat menikmati sajian kami ...! -gubhugreyot"
var neonbasecolor="blue"
var neontextcolor="lime"
var neontextcolor2="yellow"
var flashspeed=100 // flashing speed (ms)
var flashingletters=5 // text-1
var flashingletters2=6 // text-2 ; 0 = disable
var flashpause=2000 //pause (ms)
var n=0
if (document.all||document.getElementById){document.write('<font color="'+neonbasecolor+'">')
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=neonbasecolor}
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
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>
</h3>
- Animasi teks dapat digunakan di antara tag pembuka header (<head>) dan tag penutup header (</head>) atau di bagian body (antara <body> dan </body>).
- Penyimpanan dapat dilakukan lewat Edit HTML atau Add a Gadget » HTML/Javascript.
- Agar lebih jelas tentang cara menyimpan javascript atau kode HTML yang lain, silahkan buka Special Tutorials di deret menu sebelah kiri!
- Tag teks animasi tidak selalu harus menggunakan h3, namun dapat juga menggunakan yang lain seperti misalnya h2.
- Agar tels terlihat lebih variatif/indah bisa ditambahkan beberapa variable dalam tag h3 seperti contoh berikut:
<h3 style="font-size:18px;width:90%;background:#555;display:block;padding:8px 10px;border:1px solid #aaa;box-shadow:3px 3px 4px #000;text-shadow:1px 1px 1px #000;text-align:center;"> <script type="text/javascript"> //<![CDATA[ Javascript //]]> </script> </h3>
<h3> <script src="animated-text.js" type="text/javascript"></script> </h3>
0 comments:
Post a Comment
Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous