Mini Niche Scraper Banner 468x60

Javascript Text Animation: Panduan BloGGeR Cara Membuat Animasi Text

Sebuah animasi text yang sangat cantik dan menarik untuk dimanfaatkan sebagai pemanis blog. Kamu bisa mengisinya dengan kata-kata sambutan atau kata lain yang sekiranya penting atau menarik bagi pembaca blog. Untuk menggunakannya dalam blog sangat mudah sekali karena tinggal copy paste kemudian simpan di bagian manapun dari template kamu. Bis di bagian head, body atau dengan cara menambahkan widget melalui Elemen Laman (HTML/Javascript).

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).

D E M O

D E M O

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>

Catatan/Keterangan:
  • 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>
  • Jika ingin kode lebih ringkas javascript bisa di upload di file hosting terlebih dahulu kemudian rubah bentuk kodenya menjadi seperti ini:
    • <h3>
    <script src="animated-text.js" type="text/javascript"></script>
    </h3>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - gubhugreyot «

Label: , ,