FLIRTY TEXT EFFECT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+.
12-Jan-2006
: Internet Explorer 4 support removed. Made XML compliant.
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 speed=100; // speed of flirting, lower is faster /**************************** * Flirty Texy Effect * *(c)2003-6 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var flitxt; var flipos=0; var flidir=1; window.onload=function() { if (document.getElementById) { var flirty=document.getElementById("flirt"); flitxt=flirty.firstChild.nodeValue; flitxt=String.fromCharCode(160)+flitxt+String.fromCharCode(160); while (flirty.childNodes.length) flirty.removeChild(flirty.childNodes[0]); for (var i=0; i<flitxt.length; i++) { var fliri=document.createElement("span"); fliri.setAttribute("id", "flir"+i); fliri.appendChild(document.createTextNode(flitxt.charAt(i))); flirty.appendChild(fliri); } flitim=setInterval("flaunt()", speed); }} function flaunt() { flipos+=flidir; if (flipos>flitxt.length || flipos<-flitxt.length) { flipos-=flidir; if (Math.random()<0.25) flidir=-flidir; if (Math.random()<0.25) flipos=-flipos; } else if (flipos==flidir && Math.random()<0.925) { flipos-=flidir; flidir=-flidir; } for (var i=0; i<flitxt.length; i++) { if (flipos+i>-1 && flipos+i<flitxt.length) { var flirme=document.getElementById("flir"+i); var flicha=flitxt.charAt(flipos+i); flirme.firstChild.nodeValue=flicha; } } } // ]]> </script>
CLICK HERE
to select all the above text
STEP 2:
Place a <div> element with 'id="flirt"' on your web-page containing the text you wish to go flirting. For example:
Don't
include anything other than text between the <div> tags.
THAT'S IT
When your page loads, the text you placed between between the <div> tags should start to flirt cheekily on and off the screen, 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!
Interested in learning more about JavaScript, CSS, HTML/XHTML/XML and PHP programming? I would highly recommend the following books...
[ This page viewed 3701 times. Last viewed Sun 20 Jul, 2008 at 07:56 ]
