Airborne Text

Main >> Tutorials >> HTML >> Airborne Text

Airborne text is text flying around and spels a word in the end. You can see an example on this page.


Step 1. Start by copying the code under and paste it in a HTML box on the page you want the text to be on.
<script language="JavaScript"> <!-- function SymError() { return true; } /*malicious javascript is not allowed.*/ SymError; //--> </script> <script type="text/javascript" language="JavaScript"> <!-- var speed=33; // speed of flight, lower is faster /***************************\ * Airborne Text Effect * * (c) 2003 mf2fm web-design * * http://www.mf2fm.co.uk/rv * * DON'T EDIT BELOW THIS BOX * \***************************/ var w3c=document.getElementById; var ie45=document.all; var airbon, airtxt, airtop, airlef, airtim; var swidth=800; var sheight=600; var airlft=new Array(); var ax=new Array(); var ay=new Array(); window.onload=function() { if (w3c||ie45) { if (document.body.clientWidth) { swidth=document.body.clientWidth-15; sheight=document.body.clientHeight-15; } else if (self.innerWidth) { swidth=self.innerWidth-25; sheight=self.innerHeight-25; } airbon=(w3c)?document.getElementById("airborne"):document.all["airborne"]; airtxt=(w3c)?airbon.firstChild.nodeValue:airbon.innerHTML; airtop=getPageTop(airbon); airlef=getPageLeft(airbon); if (ie45) { var airli=""; for (var i=0; i<airtxt.length; i++) airli+='<sp'+'an id="airb'+i+'">'+airtxt.charAt(i)+'</'+'span>'; airbon.innerHTML=airli+" "; } else { while (airbon.childNodes.length) airbon.removeChild(airbon.childNodes[0]); for (var i=0; i<airtxt.length; i++) { var airli=document.createElement("span"); airli.setAttribute("id", "airb"+i); airli.appendChild(document.createTextNode(airtxt.charAt(i))); airbon.appendChild(airli); } airbon.appendChild(document.createTextNode(String.fromCharCode(160))); } for (var i=0; i<airtxt.length; i++) { var airme=(w3c)?document.getElementById("airb"+i):document.all["airb"+i]; airlft[i]=getPageLeft(airme)-airlef; } for (i=0; i<airtxt.length; i++) { if (Math.random()<0.5) { ax[i]=(Math.random()<0.5)?0:swidth; ay[i]=Math.floor(Math.random()*sheight); } else { ay[i]=(Math.random()<0.5)?0:sheight; ax[i]=Math.floor(Math.random()*swidth); } var airme=(w3c)?document.getElementById("airb"+i):document.all["airb"+i]; airme.style.position="absolute"; airme.style.left=ax[i]+"px"; airme.style.top=ay[i]+"px"; } airtim=setInterval("fly_me()", speed); } } function getPageLeft(el) { var x=0; while(el.offsetParent!=null) { x+=el.offsetLeft; el=el.offsetParent; } x+=el.offsetLeft; return x; } function getPageTop(el) { var y=0; while(el.offsetParent!=null) { y+=el.offsetTop; el=el.offsetParent; } y+=el.offsetTop; return y; } window.onresize=function() { airtop=getPageTop(airbon); airlef=getPageLeft(airbon); if (!airtim) airtim=setInterval("fly_me()", speed); } function fly_me() { var airme, dis, dir, go=0; for (var i=0; i<airtxt.length; i++) { airme=(w3c)?document.getElementById("airb"+i):document.all["airb"+i]; dis=1+Math.floor(Math.random()*3); if (ax[i]!=airlft[i]+airlef) { dir=(ax[i]>airlft[i]+airlef)?-1:1; if (dir==-1 && ax[i]+(dir*dis)>airlft[i]+airlef) ax[i]=ax[i]+(dir*dis); else if (dir==1 && ax[i]+(dir*dis)<airlft[i]+airlef) ax[i]=ax[i]+(dir*dis); else ax[i]=airlft[i]+airlef; go=1; } dis=1+Math.floor(Math.random()*3); if (ay[i]!=airtop) { dir=(ay[i]>airtop)?-1:1; if (dir==-1 && ay[i]+(dir*dis)>airtop) ay[i]=ay[i]+(dir*dis); else if (dir==1 && ay[i]+(dir*dis)<airtop) ay[i]=ay[i]+(dir*dis); else ay[i]=airtop; go=1; } airme.style.left=ax[i]+"px"; airme.style.top=ay[i]+"px"; } if (!go) { clearInterval(airtim); airtim=0; } } // --> </script> <div id="airborne">YOUR TEXT HERE</div>

Step 2. Where it says 'YOUR TEXT HERE' you can write what you want the text to say and then you're actually done.

As you may notice, the position of the HTML box desides the position of the airborne text.

THIS IS AIRBORNE TEXT!

Copyright (C) 2007-2008 vejc-design.com. All rights reserved.
WP | ONE | GA | PB | CC

Advertising

Want to be here?

Top Affiliates

Jessica	Jabed
Fatima	Vicky
Gunnstein	Kristin
Anna	Jack
Lise	Tom

MORE?

the owner

Vibeke. 20 years old. February 23. Norway. Asker. green eyes. brown hair. soccer player.
Loves: Jan Christopher. kebab. friends. Dolly+Ferdinand. Kumsen. money. pizza. snowboard. my green car. surprises. candy. coca cola. LOST. Prison Break. Ugly Betty. sun. Nickelback.
Hates: arrogant/fake people. school. toes. rain. stealers/copiers. homework. teachers.

MORE?

Calendar

September 2008

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Domain

Owner: Vibeke
Host: one
Site name: vejc-design.com
Online since: 4. October '07
Hits:
Online: Online
Last updated: 7. September '08

MORE?

Layout

Layout up since September 4. It was made by Vibeke in Paint Shop Pro 9. Featuring Rachel Bilson. Fonts used: Ambrosia.

link me

MORE?

Updates

September 7

24 PNG's

September 4

Frontpage

Wordpress

8 tutorials

8 PNG's

Icon challenge #6

Forum

Ads