Cara Membuat Animasi Text Neon Color LED Display pada Blog


KURAZONE ~ Pada kesempatan kali ini kami berbagi mengenai "Cara Membuat Animasi Text Neon Color LED Display pada Blog", sedikit gambaran saja bahwa animasi pada text neon color ini agak mirip dengan animasi pada Lampu LED Display.

Ambil kode JavaScript dibawah ini
<script>
var message=" TERIMA KASIH ANDA TELAH MENGIKUTI BLOG INI "
var neonbasecolor="white"
var neontextcolor="green"
var neontextcolor2="red"
var flashspeed=50
var flashingletters=10
var flashingletters2=1
var flashpause=1
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(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
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>
Letakkan terserah kalian :
1. bisa di Tata letak >> widget HTML/Javascript
2. atau di Template >> Edit HTML
Kemudian Paste lalu SIMPAN

Keterangan :

var message=" TERIMA KASIH ANDA TELAH MENGIKUTI BLOG INI "

Ganti tulisan " Terima Kasih Anda Telah Mengikuti Blog Ini " menjadi teks yang kalian inginkan, misalnya " Selamat Datang di Blog Kurazone ", (Besar kecil huruf mempengaruhi tampilan)

var neonbasecolor="white"

white adalah warna default pada teks, white cocok digunakan untuk blog dengan tema gelap. Silahkan ubah ke "black" jika kalian menggunakan tema light

var neontextcolor="green" dan var flashingletters=10

adalah warna pertama yang akan tampil pada animasi, warna green adalah warna hijau, sedangkan 10 adalah jumlah huruf yang akan terkena warna hijau (spasi juga dihitung). Lihat gambar dibawah ini sebagai ilustrasinya. (hitung berapa teks yang berwarna hijau? termasuk spasi).

var neontextcolor2="red" dan var flashingletters2=1

adalah warna kedua yang akan tampil pada animasi, warna red adalah warna merah, sedangkan 1 adalah jumlah huruf yang akan terkena warna merah (spasi juga dihitung). Lihat gambar diatas sebagai ilustrasinya. (hitung berapa teks yang berwarna merah?)

var flashspeed=50 dan var flashpause=1

50 pada flashspeed adalah kecepatan animasi, sedangkan 1 pada flashpause adalah waktu delay (tunda)

>> #teks, #warna dan #nominal angkanya bisa kalian ubah sesuai keinginan kalian.

Itulah "Cara Membuat Animasi Text Neon Color LED Display pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!

DEMO :





Lebih baru Lebih lama