Neon Lights Text

Creating text animation with effects of fluorescent light (Neon Lights Text)

This post is about the neon effect on text in which the text turns from left to right. So with the following script would look effects lit from left to right but only two or more of the characters are lit depend on your setting.

If interested in trying the effect of neon on this text, please copy the script below and then insert it into the html / javascript gadget or into the post,
Script can be seen below:


<h1><script language="JavaScript1.2">
//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de
//Visit http://www.dynamicdrive.com for this script

var message="Welcome to my blog!!!"
var neonbasecolor="gray"
var neontextcolor="blue"
var neontextcolor2="red"
var flashspeed=100 // speed of flashing in milliseconds
var flashingletters=2 // number of letters flashing in neontextcolor
var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0 // the pause between flash-cycles 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++)
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></h1>

Description:
Replace the text “Welcome to my blog!!!” with the text you want displayed
In var neonbasecolor = "gray" is the text color
In var neontextcolor = "blue" is first neon text color
In var neontextcolor2 = "red" is second neon text color
At var flashspeed = 100 is the speed of moving color

You can see the result below, how good it is...

0 comments:

Post a Comment