Airborne Text

Main >> Content >> 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+"&nbsp;";
    } 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.