WebLink - Tutto per la costruzione delle tue pagine web

K17 - Effetto testo aereo.

Funziona con il Browser:

firefox

Safari

opera

internet explorer

Chrome

Crediti:
Name: mf2fm web-design
Website: www.mf2fm.com/rv

Descrizione:

Effetto testo aereo, si commenta da solo basta vedere come la frase svolazza suillo schermo prima di atterrare nel punto prestabilito.

Benvenuti su web-link.it scripting

Passo 1 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo nella vostra pagina nel punto esatto in cui deve apparire l'effetto, fra i tags <head> e </head>.

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 *
***************************/

/* prelevato ed illustrato su Web-Link.it 
******************************************/

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 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>

Passo 2 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo nella vostra pagina nel punto esatto in cui deve apparire l'effetto, fra i tags <body> e </body>.

Note : se dovete fare modifiche al colore, al font, alla dimensione della frase agite con i css sul tag span che la racchiude.

Nelle prime righe dello script è possibile agire sui valori:
var speed=40; per variare la velocità, più alto è questo numero più lenta sarà l'animazione.
var count=250; per variare il numero di frames prima che la frase sia completata.

Elenco completo degli script.

Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.

JavaScript K17