Cara Membuat Effek Neon Box Pada Teks

Script effek Neon Boks ( menyala ) pada teks merupakan kode HTML yang berfungsi untuk membuat teks menyala secara bertahap dengan warna tertentu, penggunaan cara ini cukup mudah dan sederhana.

Langkah pertama

  1. Klik Page Element
  2. Klik Add Gadget
  3.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  5. Copy and paste kode dibawah ini

<h3>

<script language="JavaScript1.2">

var message="Selamat Datang"
var neonbasecolor="black"
var neontextcolor="yellow"
var flashspeed=50 //in milliseconds

///No need to edit below this line/////

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++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()


</script></h3>


Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.
  • warna merah, Teks yang akan digunakan ( silakan diganti sesuai keperluan )
  • warna Orange, kode warna teks sebelum terkena effek neon boxs. 
  • warna kuningkode warna teks setelah terkena effek neon boxs.
  •  warna hijau,  kecepatan perubahan warna pada teks ( makin kecil angka makin cepat )

_______________________________________
Demikian tutorial blog Cara Membuat Effek Neon Box Pada Teks
Semoga bermanfaat...!!

Tidak ada komentar:

Posting Komentar

Ada pendapat lain dari sobat, Silahkan berkomentar