RV's free DHTML and JavaScript text and graphic scripts

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]-=swideax[i]Math.random()/(frame(count-1)); ay[i]-=shighay[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.

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/dhtmlairborne.php.

This page has been viewed 24 times. It was last viewed on Thu 21 Nov, 2024 at 05:02