Hiji animasi text anu pohara geulis sarta metot pikeun dimangpaatkeun minangka mamanis blog. Manéh bisa ngeusianana kalayan kecap-kecap pangbagéa atawa kecap séjén anu sakirana penting atawa metot pikeun pamaca blog. Pikeun makéna dina blog pohara gampang sakali alatan ancik copy paste saterusna simpen di bagian manapun ti template manéh. Bis di bagian head, body atawa ku cara nambahan widget ngaliwatan Elemen Laman (HTML/Javascript).
Sababaraha variable tiasa dirubah kanggo meunangkeun efek animasi anu dirasa cocog.
Sababaraha variable tiasa dirubah kanggo meunangkeun efek animasi anu dirasa cocog.
- var message = tempat nuliskeun teks
- var neonbasecolor, var neontextcolor, var neontextcolor2 = kanggo nyieun variasi warna.
- var flashspeed = kanggo ngarobah kecepatan animasi
var flashingletters, var flashingletters2 = mengatur jumlah teks warna-1 sarta teks warna-2 - var flashpause = kanggo mengatur lami wanci teks eureun (pause) dijero milliseconds (ms).
Javascript - Text Animation.
<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>
Catetan/Katerangan:
- Animasi teks tiasa dipake di antawis tag pembuka header (<head>) sarta tag panutup header (</head>) atawa di bagian body (antara <body> dan </body>).
- Penyimpanan tiasa dipigawe liwat Edit HTML atawa Add a Gadget » HTML/Javascript.
- Supados langkung tangtos ngeunaan cara nunda javascript atawa kode HTML anu sanes,mangga buka Special Tutorials di deret menu sebeulah kenca!
- Tag teks animasi henteu sok kedah ngagunakeun h3, nanging tiasa oge ngagunakeun anu sanes sepertos contona h2.
- Supados tels katembong langkung variatif/indah tiasa ditambahkeun sababaraha variable dina tag h3 sepertos conto iyeu:
<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>
Tidak ada komentar:
Posting Komentar