L'ultima idea che hanno avuto le agenzie di advertising su Internet sono i banner mobili.
      Dei banner, immersi in uno o piu' livelli, che svolazzano nella pagina per catturare l'attenzione del visitatore ed ottenere dunque qualche click in più.
      Si va dai semplici banner che scorrono per lo schermo (come si vede su siti tipo tgcom.it) a cose piu' azzardate ed elaborate che prevedono ad esempio dei banner spezzati in 4 parti che si ricompongono durante l'arrivo alla posizione finale.
      Con questo script potrete implementare anche nel vostro sito un effetto simile che consiste in un banner che parte da una posizione fissa e definita fino a raggiungere, ad esempio, la testata della pagina. Il movimento che ho implementato è volutamente semplice (una traslazione lungo un segmento di retta), ma nulla vieta a chi ha un po' di fantasia, e di capacità, di sostituire le formule che calcolano la posizione istantanea per ottenere movimenti curvilinei o a spierale o... quel che vi viene in mente :-)
      L'unico consiglio che mi sento di darvi è: non abusate di questi effetti, alla lunga stancheranno il visitatore con il rischio di perdere in visibilità nel sito. L'uso di questo tipo di banner è consigliato a chi ha la possibilità di visualizzarli in maniera random, con uno script lato server si puo' far uscire il banner solo una volta su 10 e non tediare così il visitatore.

      Lo script è di fatto abbastanza semplice: consiste in un livello che contiene il banner da visualizzare (una semplice immagine nel mio esempio che puo' essere sostituita dagli script necessari e forniti dai circuiti di scambio) ed un po' di JavaScript per maneggiare il livello che lo contiene.
      Per il tag del livello vi rimando al codice degli esempi (in fondo alle pagine), mentre qui commento la parte JavaScript:

<SCRIPT>
/* -----------------------------------------------------------
	Variabili personalizzabili
-------------------------------------------------------------- */
var startx=400; // Posizione iniziale: distanza dal margine sinistro
var starty=400; // Posizione iniziale: distanza dal margine superiore
var endx=200; // Posizione finale: distanza dal margine sinistro
var endy=10; // Posizione finale: distanza dal margine superiore
var step=10; // Numero di movimenti
var delay=100; // Ritardo fra i movimenti
/* -----------------------------------------------------------
	Fine Variabili personalizzabili
-------------------------------------------------------------- */

var JsDirFloatBanner=null;
var nn = document.layers?true:false;
var DOM2 = document.getElementById?true:false;
var ie = document.all?true:false;
var deltax=0,deltay=0,cnt=0;

function StartJsDirFloatingBanner()
   {
   JsDirFloatBanner=nn?document.layers.JsDirFloatingBanner:DOM2? [...
      ...] document.getElementById("JsDirFloatingBanner").style:document.all.JsDirFloatingBanner.style;
   JsDirFloatBanner.left=startx;
   JsDirFloatBanner.top=starty;
   JsDirFloatBanner.visibility="visible";
   deltax=(endx-startx)/step;
   deltay=(endy-starty)/step;
   setTimeout("JsDirFloatingBannerMove()",10);
   }
   
function JsDirFloatingBannerMove()
   {
   startx+=deltax;
   starty+=deltay;
   JsDirFloatBanner.left=startx;
   JsDirFloatBanner.top=starty;
   cnt++;
   cnt<step?setTimeout("JsDirFloatingBannerMove()",delay):null;
   }
onload=StartJsDirFloatingBanner;
</SCRIPT>

      La prima parte dello script contiene la variabili di personalizzazione: posizioni iniziale e finale del livello e le variabili che comandano il movimento. La parte successiva contiene il resto dello script e non ha bisogno, normalmente, di modifiche.
      Le prime 4 variabili contengono le posizioni inziali e finali (distanze dai margini sinistro e superiore della finestra), mentre le due variabili successive (step e delay) sono quelle che comandano il movimento.
      La prima variabile (step) definisce il numero di spostamente che farà il livello per passare dalla posizione iniziale a quella finale, mentre la seconda (delay) definisce il tempo di attesa fra due moviementi successivi (è in pratica il parametro temporale di un setTimeout().
      Ho volutamente lasciato indipendenti queste due variabili per consentirvi un maggiore controllo sul movimento. È ovvio che il tempo fra due spostamenti sarà tanto minore quanti più alto è il numero degli spostamenti (e dunque avrei potuto far dipendere delay da step in qualche maniera), sta a voi trovare il giusto compromesso fra i due valori.

      Ok, veniamo allo script!
      La prima variabile (JsDirFloatBanner) è la solita variabile di comodo in cui andremo a referenziare il livello. Seguono le solite 3 variabili che permettono di identificare il browser in cui lo script lavora e 3 variabili (deltax, deltay e cnt) in cui depositeremo le distanze che coprirà il banner ad ogni spostamento ed un contatore che farà muovere il livello in relazione al valore dato alla step nella sezione personalizzabile.
      La prima funzione (StartJsDirFloatingBanner) viene attivata dall'ultima istruzione dello script (onload) che scatta al caricamento del documento. Tutto quel che fa questa funzione è identificare il livello ed assegnarlo alla variabile predisposta. Subito dopo lo sposta alla posizione iniziale e lo rende visibile.
      Nelle due righe successive (in verde) vengono definiti i due delta che, come detto, nell'esempio che scaricherete definiscono un movimento lineare. L'ultima riga della funzione mette in moto il livello.

      La seconda e ultima funzione serve invece a muovere il livello.
      Nelle due righe in verde viene calcolata la nuova posizione aggiungendo alle posizioni iniziali il delta calcolato nella funzione precedente, poi viene variata la posizione del livello (proprietà left e top) e successivamente viene incrementato il contatore cnt. Finché cnt è minore di step (quindi del numero di moviementi programmati nelle preferenze) il setTimeout() riesegue la funzione dopo il tempo prefissato in delay nelle preferenze.

      Lo script è tutto qui.
      Puo' essere ovviamente personalizzato a proprio piacimento, ad esempio sostituendo nelle sezioni che ho evidenziato in verde altre formule si possono ottenere movimenti diversi: usando un logaritmo o un'esponenziale opportunamente parametrizzati si possono ottenere dei buoni effetti di moviemnto curvilineo.

      Ma al di là del semplice moto si puo' intervenire anche semplicemente sul livello. Ad esempio comandandone opportunamente la visibilità si potrebbe farlo lampeggiare durante il movimento, o con qualche barbatrucco di Explorer si puoò ottenere un effetto di fade-in (usando cnt come parametro).
      A titolo di esempio modificando le due funzioni come segue (porzioni in rosso):

function StartJsDirFloatingBanner()
   {
   JsDirFloatBanner=nn?document.layers.JsDirFloatingBanner:DOM2? [...
      ...] document.getElementById("JsDirFloatingBanner").style:document.all.JsDirFloatingBanner.style;
   JsDirFloatBanner.left=startx;
   JsDirFloatBanner.top=starty;
   JsDirFloatBanner.visibility="visible";
   deltax=(endx-startx)/step;
   deltay=(endy-starty)/step;
   if (nn) {
   JsDirFloatBanner.clip.width=10;
   JsDirFloatBanner.clip.height=10;
   }
   else
      JsDirFloatBanner.clip="rect(0px 10px 10px 0px)"
   setTimeout("JsDirFloatingBannerMove()",10);
   }
   
function JsDirFloatingBannerMove()
   {
   startx+=deltax;
   starty+=deltay;
   JsDirFloatBanner.left=startx;
   JsDirFloatBanner.top=starty;
   var percento=cnt/step*110
   if (nn) {
      JsDirFloatBanner.clip.width=468*percento/100+10;
      JsDirFloatBanner.clip.height=60*percento/100+10;
   }
   else
      JsDirFloatBanner.clip="rect(0px " + (468*percento/100+10) + "px " +(60*percento/100+10) + "px 0px)"
   cnt++;
   cnt<step?setTimeout("JsDirFloatingBannerMove()",delay):null;
   }

      L'effetto che si ottiene è di un banner che diventa man mano visibile a partire dall'angolo superiore sinistro all'inizio del movimento fino alla posizione finale in cui e' totalmente visibile.

      Insomma: un po' di fantasia ed un minimo di conoscenza di JavaScript e dei rudimenti di Matematica e Geometria vi consentiranno di tirar fuori delle cose abbastanza carine.