AIRBORNE TEXT EFFECT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+ and Firefox 1.0. It will work with Opera 7+ but the resulting display may be slightly different.
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=40; // speed of flight, lower is faster var count=250; // number of frames before animation complete /***************************\ * Airborne Text Effect * *(c) 2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \***************************/ var airbon, airtxt, airtop, airlef; var swide=800; var shigh=600; var frame=count; var ax=new Array(); var ay=new Array(); window.onload=function() { if (document.getElementById) { var i, y, airme, airli; set_width(); airbon=document.getElementById("airborne"); if (!document.all) airbon.style.position="relative"; // ie bug fix airtxt=airbon.firstChild.nodeValue; while (airbon.childNodes.length) airbon.removeChild(airbon.childNodes[0]); for (i=0; i<airtxt.length; i++) { airli=document.createElement("span"); airli.setAttribute("id", "airb"+i); airli.appendChild(document.createTextNode(airtxt.charAt(i))); airbon.appendChild(airli); } y=getPageTop(airbon); for (i=0; i<airtxt.length; i++) ax[i]=getPageLeft(document.getElementById("airb"+i)); for (i=0; i<airtxt.length; i++) { if (Math.random()<0.5) { ax[i]=((Math.random()<0.5)?0:swide)-ax[i]; ay[i]=(Math.floor(Math.random()*shigh))-y; } else { ay[i]=((Math.random()<0.5)?0:shigh)-y; ax[i]=(Math.floor(Math.random()*swide))-ax[i]; } airme=document.getElementById("airb"+i); airme.style.position="relative"; airme.style.left=ax[i]+"px"; airme.style.top=ay[i]+"px"; } fly_me(); }} function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function getPageLeft(el) { var x=0; do { x+=el.offsetLeft } while ((el=el.offsetParent)!=null) ; return x; } function getPageTop(el) { var y=0; do { y+=el.offsetTop } while ((el=el.offsetParent)!=null) ; return y; } function fly_me() { var airme; for (var i=0; i<airtxt.length; i++) { ax[i]-=swide*ax[i]*Math.random()/(frame*(count-1)); ay[i]-=shigh*ay[i]*Math.random()/(frame*(count-1)); airme=document.getElementById("airb"+i); airme.style.left=Math.round(ax[i])+"px"; airme.style.top=Math.round(ay[i])+"px"; } if (--frame) setTimeout("fly_me()", speed); } // ]]> </script>
CLICK HERE
to select the above script ready to paste it into your clipboard
STEP 2:
Place a <span> element with 'id="airborne"' on your web-page containing the text you wish to be animated. For example:
Don't
include anything other than text (such as images or any other HTML tags) between the <span> tags.
THAT'S IT
When your page loads, the text you placed between between the <span> tags should float into place, 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 2855 times. Last viewed Tue 13 May, 2008 at 21:48 ]
