Membuat Animasi Teks Warna-warni Dengan Javascript


Membuat Animasi Teks Warna-warni Dengan Javascript

Assalamualaikum Wr. Wb.
Efek tampilan warna teks yang bisa berubah menjadi warna-warni dengan sensasi unik dan menarik, Dijamin dapat membuat pengunjung website kamu bakalan betah, dan rajin ngintipin website kamu. cara ini menggunakan bahasa pemrograman javascript dan mudah untuk memprakekkannya. yuk langsung aja disimak tutorialnya

Copy kode berikut dan pastekan sebelum </head>

<script type="text/javascript">
//   Change next line for your text msg.
var msg = 'The Path Of Monoz'
var colorTimer = null;
//  Color can be altered below - eg. remove - ABCDEF = darker
function toHex(n){
var hexChars = '0123456789ABCDEF';
if (n == 0) return n;
var j, k;
var temp = '';
while (n != 0){
j = n % 16;
n = (n - j)/16;
temp = hexChars.charAt(j) + temp;
}
return temp;
}
function colorize(){
if (!document.getElementById) return;
for (i=0; i<msg.length; i++){
k = Math.round(Math.random() * 16777215);
k = toHex(k);
while (k.length < 6){
k = k + '0';
}
document.getElementById('colorizer' + i).style.color = '#' + k;
}
//  Speed change below - Default = 200 - Lower = Faster
colorTimer = window.setTimeout('colorize()', 200);
}
window.onload =  colorize;
</script>

Keterangan : Ganti tulisan The Path Of Monoz pada kode script di atas dengan tulisan yang diinginkan.

 

Selanjutnya, copy kode berikut dan pastekan sesudah <body>

<div id="text" style="font-size:large; font-family: 'Courier New', Courier, monospace; letter-spacing:normal; font-weight:bold; font-style:normal; text-align:center; padding-top:15px;">
<script>
for (var i=0; i<msg.length; i++){
document.write("<span id ='colorizer" + i + "'>" + msg.charAt(i) + "</span>");
}
</script></div>

 

Keterangan :

  • Silakan sesuaikan Style pada kode CSS di atas yang saya beri warna.
  • font-size : Ukuran huruf.
  • font-family : Jenis huruf.
  • letter-spacing : Spasi huruf.
  • font-weight : Jenis atribut huruf.
  • text-align : Posisi huruf

 

Maka hasilnya seperti ini

 

Nah, gimana? keren kan? silahkan dicoba, jangan lupa komentarnya dong, hehe.

Wassalamualaikum Wr. Wb.


http://short.erllang.ga/RROwG

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter Google+ LINE WhatsApp
Komentar pada “ Membuat Animasi Teks Warna-warni Dengan Javascript