RV's free DHTML and JavaScript effects :: Multi-Wipe Text (Neon)

MULTI-WIPE (NEON) TEXT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0+ and Opera 7+
29-Sep-2005: Added the option for the text to be a link.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var fgcolour="#6600cc"; // foreground colour var bgcolour="#ffffff"; // background colour var speed=66; // speed colours change, 1 second = 1000 var delay=50; // how long to wait between wipes var alink="http://www.mf2fm.com/rv"; // page to link text to (set to ="" for no link) /**************************** Multi-Wipe Neon Text Effect (c) 2003-6 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var w_txt, w_cnt=-1, wflip=bgcolour, w_sty=1, w_mid; var wrand=new Array(); window.onload=function() { if (document.getElementById) { var i, wiper, wipei; wiper=document.getElementById("wipe"); w_txt=wiper.firstChild.nodeValue; while (wiper.childNodes.length) wiper.removeChild(wiper.childNodes[0]); for (i=0; i<w_txt.length; i++) { wipei=document.createElement("span"); wipei.setAttribute("id", "wipe"+i); wipei.appendChild(document.createTextNode(w_txt.charAt(i))); if (alink) { wipei.style.cursor="pointer"; wipei.onclick=function() { top.location.href=alink; } } wiper.appendChild(wipei); } w_mid="#"; for (i=1; i<6; i+=2) { var bg=parseInt(bgcolour.substring(i,i+2),16); w_mid+=dechex(Math.floor(bg+(parseInt(fgcolour.substring(i,i+2),16)-bg)/2)); } for (i=0; i<w_txt.length; i++) wrand[i]=i; wiper=setInterval("randwipe()", speed); }} function dechex(dec) { return ((dec<16)?"0":"")+dec.toString(16); } function c(ref, shade) { document.getElementById("wipe"+ref).style.color=shade; } function randwipe() { if (w_cnt++<w_txt.length+2+delay(wflip==fgcolour)) eval ("wipe"+w_sty+"();"); else { w_cnt=-1; wflip=(wflip==fgcolour)?bgcolour:fgcolour; var w_old=w_sty; while (w_old==w_sty) w_sty=Math.floor(Math.random()5); } } function wipe0() { if (w_cnt<Math.floor(w_txt.length/2)) { c(w_cnt, w_mid); c(w_txt.length-w_cnt-1, w_mid); } else if (w_cnt<w_txt.length) { c(w_cnt, wflip); c(w_txt.length-w_cnt-1, wflip); } } function wipe1() { if (w_cnt==0) { for (var i=0; i<w_txt.length; i++) { var rand=Math.floor(Math.random()w_txt.length); var temp=wrand[i]; wrand[i]=wrand[rand]; wrand[rand]=temp; } } if (w_cnt<w_txt.length) c(wrand[w_cnt], w_mid); if (w_cnt>0 && w_cnt<w_txt.length+1) c(wrand[w_cnt-1], wflip); } function wipe2() { if (w_cnt<w_txt.length) c(w_cnt, w_mid); if (w_cnt>0 && w_cnt<w_txt.length+1) c(w_cnt-1, wflip); } function wipe3() { if (w_cnt<w_txt.length) c(w_cnt, w_mid); if (w_cnt>0 && w_cnt<w_txt.length+1) c(w_cnt-1, wflip); if (w_cnt>1 && w_cnt<w_txt.length+2) c(w_cnt-2, w_mid); if (w_cnt>2 && w_cnt<w_txt.length+3) c(w_cnt-3, (wflip==fgcolour)?bgcolour:fgcolour); if (w_cnt==w_txt.length+2) wflip=(wflip==fgcolour)?bgcolour:fgcolour; } function wipe4() { if (w_cnt<w_txt.length+3) { var start=(wflip==fgcolour)?bgcolour:fgcolour; var temp="#"; for (var i=1; i<6; i+=2) { var hex1=parseInt(start.substring(i,i+2),16); var hex2=parseInt(wflip.substring(i,i+2),16); temp+=dechex(Math.floor(hex1+(hex2-hex1)*(w_cnt/(w_txt.length+2)))); } for (var i=0; i<w_txt.length; i++) c(i, temp); } } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Change the colours at the start of the script you just copied to reflect the background and foreground colours of your web-page. Only use the format '#ffffff' and not 'white' or 'rgb(255, 255, 255)'.
STEP 3: Place a <span> element with ' id="wipe" ' on your web-page containing the text you wish to be wiped out. For example: Don't include anything other than text between the <span> tags.
THAT'S IT When your page loads, the text you placed between between the <span> tags should be wiped in and out, like the text at the top of this page.
No menu on the left? Click here for a full list of all the free DHTML and Javascript effects you could be using on your web-site!

[ This page viewed 78 times. Last viewed Fri 30 Jul, 2010 at 02:20 ]