Rabu, 22 Februari 2012

Cara Membuat Efek Lampu Neon Pada Tulisan


Hi....... Sobat,
Apa kabar pagi ini, pada baik-baik semua kan?
Mumpung kita masih liburan, saya sengaja datang dengan niat mengantarkan oleh-oleh untuk sobat semua. saya berharap sobat pada lahap nantinya. Oleh-oleh saya kali ini yaitu Cara Membuat Efek Lampu Neon Pada Tulisan (oleh-olehnya kirain makanan, kalau kayak gtuan mah, bagaimana bisa lahap? wkwkwkwkw).

Kemarin kita sudah belajar belajar Membuat Tulisan Berefek Matrix ada juga yang Berefek Api. Selanjutnya kita akan belajar tentang Cara Membuat Efek Lampu Neon Pada Tulisan.
Effect flashing didalam text adalah murni dari pengaruh JavaScript, tanpa menggunakan kode CSS.
Neon Text Color jQuery ini dapat digunakan di postingan ataupun di sidebar, guna mempercantik tampilan blog/website sobat.
Bila Sobat tertarik sobat bisa langsung ikuti langkah pembuatannya, Sebagai Berikut:
Masukan kode JavaScript dibawah ini pada postingan pada mode Edit HTML
atupun di sidebar dengan cara Tambah Gadget → HTML/JavaScript pada widget sidebar sobat


<script language="JavaScript1.2">
var message="Tulisan Yang diberi Efek"
var neonbasecolor=""
var neontextcolor="#fd3d3a"
var neontextcolor2="#ff8080"
var flashspeed=50 // kecepatan flashing dalam milliseconds
var flashingletters=5 // jumlah huruf yg di flashing dlm neontextcolor
var flashingletters2=1 // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable)
var flashpause=0 // pause diantara flash-cycles dlm milliseconds
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>
 
 
Catatan; Ganti kode Tulisan Yang diberi Efek dengan tulisan yang akan diberikan efek. kode #fd3d3a dan #ff8080, ganti kode warna dengan kode warna yg sobat suka. angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya. angka 5 adalah merupakan jumlah huruf yang di flashing. angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh. DEMO:

Tidak ada komentar:

AMANAT

Visitors

FOLOw