~ HTML.it ~
Guardate in basso a destra sul vostro monitor... no, non l'orologio, lo vedo che sono le
un po' più in alto... leggete una scritta rossa in corsivo? bene... provate, prima di continuare a leggere, a scrollare un po la pagina con la barra di scorrimento... vedete ancora la scritta?
Se state utilizzando Microsoft Internet Explorer o Netscape Navigator immagino di si!!!
Perdonatemi per questo "mistero" iniziale, ma sono ORE che sto pensando ad una descrizione per questo effetto Dhtml... evidentemente la giornata non è favorevole!!!
Bene, prendiamo due piccioni con una fava! impareremo ad utilizzare una serie di utili comandi che il JavaScript utilizza per la realizzazione di effetti in Dhtml, e lo faremo realizzando questo piacevole, e perchè no, in molti casi anche utile effetto.
Creiamo un file JavaScript e chiamiamolo No_Scroll_Layer.js e richiamiamolo su ogni pagina in cui vogliamo ottenere l'effetto con l'apposito comando di riferimento ad un file esterno:
<script language="javascript1.2" src="No_Scroll_Layer.js">
</script>
Nelle pagine posizioneremo un layer (un livello). Non importa se si tratta di un <div> o di uno <span>. Il mio consiglio è quello di utilizzare il secondo per evitare problemi di ritorno a capo. Per il posizionamento assoluto utilizzeremo un CSS. Ecco il codice per la formattazione dell'effetto.
<span id="TextScroll" style="position: Absolute;left: 0px; top: 0px; visibility: Hidden;">
MA CHE CARINO CHE È QUESTO EFFETTO :-)
</span>
Nel layer potete inserire quello che vi pare, compatibilmente con gli elementi e la grafica della pagina: potreste ad esempio inserirvi un menu discreto e non troppo pesante, una piccola immagine, un logo, o qualsiasi altra cosa vi piaccia.
Esaminiamo le due impostazioni che abbiamo attrbiuito al layer:
- un identificativo univoco di tipo id (id="TextScroll") per raggiungere il layer in fase di realizzazione dello script
- una serie di stilizzazioni CSS (style="...") quali il posizionamento assoluto, come già detto, la distanza da destra e da sinistra, la visibilità nascosata finché lo script non verrà eseguito per intero sul client per evitare problemi di lentezza di caricamento o incompatibilità con browser diversi da quelli citati all'inizio dell'articolo
Non ci resta che dare un'occhiata di carattere generale allo script nella sua integrità, poi con calma lo scaricheremo, lo spezzetteremo e lo esamineremo nelle sue parti fondamentali.
Ecco il codice dello script:
var larghezza = "";
var altezza = "";
function Inizializza() {
if (document.all) {
larghezza = TextScroll.offsetWidth;
altezza = TextScroll.offsetHeight;
setInterval("TextScroll_IE()", 1);
TextScroll.style.visibility = "Visible";
}
else if (document.layers) {
larghezza = document.TextScroll.document.width;
altezza = document.TextScroll.document.height;
setInterval("TextScroll_NN()", 1);
document.TextScroll.visibility = "Show";
}
}
function TextScroll_IE() {
TextScroll.style.pixelLeft = document.body.scrollLeft + document.body.clientWidth - larghezza - 10;
TextScroll.style.pixelTop = document.body.scrollTop + document.body.clientHeight - altezza - 10;
}
function TextScroll_NN() {
document.TextScroll.left = pageXOffset + window.innerWidth - larghezza - 10;
document.TextScroll.top = pageYOffset + window.innerHeight - altezza - 10;
}
window.onload = Inizializza;
La sua struttura è molto semplice e potremmo dividerla in quattro pezzi: il primo in cui dichiariamo le variabili relative all'altezza e alla larghezza e le impostiamo inizialmente vuote:
var larghezza = "";
var altezza = "";
La prima delle tre funzioni proposte, come il nome stesso lascia ad intendere (Inizializza()), si occupa di inizializzare lo script, nel senso che rimanda ad una delle due funzioni successive, una compatibile con Internet Explorer ed un'altra con Navigator, mediante le condizioni
if (document.all) { ...
e...
if (document.layers) { ...
Esaminiamole entrambe.
// Verifica che venga richiamata la funzione per Internet Explorer
if (document.all) {
// La proprietà offsetWidth imposta la larghezza "fuori campo"
larghezza = TextScroll.offsetWidth;
// La proprietà offsetWidth imposta l'altezza "fuori campo"
altezza = TextScroll.offsetHeight;
// Dopo un millesimo di secondo lasciamo partire la funzione per IE che vedermo tra breve
setInterval("TextScroll_IE()", 1);
// Rendiamo visibile il layer che ci interessa
TextScroll.style.visibility = "Visible";
}
La struttura della funzione di controllo per Navigator è strutturata in maniera analoga a quella per Explorer: cambiano solo in maniera minima la forma sintattica dei controlli da effettuare. Nella tabella successiva riporto le differenze tra le due forme in maniera schematica:
|
È possibile notare che le differenze sono notevoli nella forma nelle prime due righe della tabella, mentre è minima quella sullo visibilità dello style dell'elemento layer, ovvero Visible (IE) e Show (NN).
Nella temporizzazione invece si fa riferimento alle funzioni compatibili con i rispettivi browser, TextScroll_IE e TextScroll_NN.
Passiamo alle funzioni vere e proprie appena citate. Iniziamo con quella per Internet Explorer:
function TextScroll_IE() {
// Imposta la distanza dal bordo destro, distanziando il layer di 10 pixel
TextScroll.style.pixelLeft = document.body.scrollLeft + document.body.clientWidth - larghezza - 10;
// Imposta la distanza dal bordo inferiore, distanziando il layer di 10 pixel
TextScroll.style.pixelTop = document.body.scrollTop + document.body.clientHeight - altezza - 10;
}
Le medesime operazioni svolge la funzione ottimizzata per Navigator, propongo il codice senza commenti, valgono quelli della precedente:
function TextScroll_NN() {
document.TextScroll.left = pageXOffset + window.innerWidth - larghezza - 10;
document.TextScroll.top = pageYOffset + window.innerHeight - altezza - 10;
}
Richiamiamo il tutto con l'evento onload:
window.onload = Inizializza;
Et voilà! L'effetto è servito. Ora costruite la vostra pagina con le istruzioni che vi abbiamo fornito all'inizio e adattatela alle vostre esigenze.
