22 ottobre 2007  2

Scrollovers: animare i link con javascript

Se si desidera animare in maniera un pò diversa dal solito i collegamenti ipertestuali contenuti all'interno di una pagina HTMLW si può senz'altro prendere in considerazione SCROLLOVERS. E' una piccola libreria javascript che consente di aggiungere un simpatico effetto di rollover (dall'alto verso il basso o viceversa) sul testo di un link al semplice passaggio del mouse sullo stesso.

A seguire, diversi esempi di collegamenti ipertestuali applicati ad altrettanti stili di formattazione di un testo in HTML:

H2: Scrollover

H3: Scrollover

H4: Scrollover

Scrollover su paragrafo semplice

Si nota chiaramente che l'effetto rende meglio su font di maggiori dimensioni e possibilmente appartenente alla famiglia Sans Serif (ovvero caratteri tipografici senza grazieW). Sfortunatamente l'effetto non funziona correttamente se il link è distribuito su due o più righe: purtroppo mostra solo la prima riga e, in fase di rollover, anche le successive, per poi tornare a mostrare solo la prima. Questa anomalia si può osservare nell'esempio seguente:

Questo link è su due righe
ma non è mostrato correttamente
 

Se si inseriscono tag HTML all'interno del tag di hyperlink <a>...</a>, ad esempio per evidenziare in grassetto (<b>...</b>) o in corsivo (<em>...</em>) una parte del testo, lo script non viene eseguito. 

Come si applica

Si può procedere in due modi. O sfruttando il riferimento in remoto alla libreria javascript dello sviluppatore inserendo la seguente riga di codice nella pagina html che si vuole arricchire con l'effetto:


<script type="text/javascript" src="http://www.scrollovers.com/js/scrollovers.js"></script>

Oppure scaricando direttamente la libreria e modificando opportunamente il codice indicato indirizzandolo al percorso ove si andrà a copiare il file scrollovers.js. Una volta inserito il riferimento allo script nelle pagine, si potrà applicare l'effetto solo ai collegamenti desiderati, formattando le ancore con la seguente sintassi:


<a href="http://{url}" class="scrollover" type="scrollover">Testo del collegamento</a>

Le impostazioni dei colori relativi al collegamento si possono impostare o in maniera tradizionale ridefinendo nel cssW associato alla pagina le cassi relative ai tag a e a:hover oppure definendo le seguenti classi specifiche all'interno della pagina HTML (le stesse classi possono essere definite all'interno foglio di stile):

<style>
   a.scrollover {
      color: /* codice colore link standard */
   }
   a.scrollover em:first-line {
      color: /* codice colore rollover */
   }
</style>

La compatibilità è garantita con gli internet browser più diffusi.

Conclusioni

L'effetto è abbastanza gradevole, se usato a piccole dosi. Applicandolo a testi con font di dimensione medio piccola perde un pò di fascino: è decisamente più d'effetto, a mio avviso, su link collegati a titoli o voci di menù, a patto che il font utilizzato sia mediamente grande e possibilmente in grassetto.

Per maggiori informazioni, come sempre, invito a consultare il sito dedicato al progetto.

Esprimi il tuo giudizio

Commenti (2) -

Traffyk
Traffyk
24 ott 2007 alle 17:37  02
Il mio aggregatore ha preceduto il commento! Laughing Avevo letto stanotte l'articolo ma ero troppo stanco per commentare.. eheh

Comunque volevo dire che è davvero bello questo sistema, inoltre è stato fatto anche molto bene perchè quando agisce javascript non noto nessun incremento nell'utilizzo del processore. Naturalmente come spieghi tu bisogna utilizzarlo con parsimonia e attenzione.
Come probabili utilizzi lo vedo bene nelle testate dei blog sui bottoni di testo o sul nome stesso dei blog.
Cristiano
Cristiano
24 ott 2007 alle 18:00  03
Sono dello stesso parere. Se guardi il codice javascript potrai osservare che è realizzato con estrema cura.
Peccato per il baco delle righe multiple ...

Pingbacks and trackbacks (1)+

Aggiungi Commento

biucitecode
  • Commento
  • Anteprima
Loading


| |   |  

Codice QR

Codice QR - cristianofino.net

Ultimi Commenti