Simple Text Wipe Or Neon Effect from RV's Free Javascripts

WIPE OUT TEXT

This script has been tested on and shown to work with the following browsers: Internet Explorer version 5 and above Google Chrome version 1 and above Mozilla Firefox version 1 and above Apple Safari version 3 and above Opera version 7 and above (including Opera mobile) Android Browser version 1 and above

29-Sep-2005: Added the option for the text to be a link. 28-Sep-2005: Converted to XML compatible, simplified and re-tested.
STEP 1: Copy and paste the code below so that it sits somewhere between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var speed=100; // speed colours change, 1 second = 1000 var delay=25; // how long to wait for each wipe var alink="http://www.mf2fm.com/rv"; // page to link text to (set to ="" for no link) /**************************** * Wipe Out Text Effect * (c)2003-15 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(swab); var w_txt; function swab() { if (document.getElementById) { var wiper=document.getElementById("wipe"); w_txt=wiper.firstChild.nodeValue; while (wiper.childNodes.length) wiper.removeChild(wiper.childNodes[0]); for (var i=0; i<w_txt.length; i++) { var 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); } wipe(0); }} function wipe(c) { if (!c) for (var w=0; w<w_txt.length; w++) document.getElementById("wipe"+w).style.visibility="hidden"; else if (c<=w_txt.length) document.getElementById("wipe"+(c-1)).style.visibility="visible"; setTimeout("wipe("+(++c%(w_txt.length+delay))+")", speed); } // ]]> </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'.
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 out in a kind of neon-light way, like the text at the top of this page.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlwipe.php.

This page has been viewed 533 times. It was last viewed on Sat 20 Apr, 2024 at 15:00