WIPE OUT 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.
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-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var w_txt; window.onload=function() { 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.
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 87 times. Last viewed Fri 30 Jul, 2010 at 10:47 ]
