Informativa

Link che s’illuminano con jQuery



Molti templates premium fra cui ad esempio quelli rilasciati da Rockettheme, implementano questa “nuova” caratteristica di rendere i link gradatamente illuminati al momento dell’hover.

Per implementare questo effetto, basta scrivere poche semplici righe di jQuery ed inserirle nel nostro theme ed anche i link dei nostri templates si illumineranno magicamente.

Prima di vedere lo script occorre dire due cosette, la prima è che per farlo funzionare occorre oltre a jQuery anche il plugin jQuery Animate Colors, il plugin appunto per l’animazione del colore.

Come probabilmente sapete ogni script aggiunto alle nostre pagine ne aumentano la pesantezza. Occorre quindi chiedersi se vale la pena implementare jQuery e il relativo plugin solo per illuminare i link.

Il mio consiglio è di utilizzarlo solo se il template richiede già jQuery altrimenti se ne può fare anche a meno.

Lungi da me voler spiegare jQuery, sono solo un neofita con tanta passione e il mio intento è solo quello di condividere con voi queste poche righe che ho scritto.

L’HTML è composto da un semplice elenco a cui è stato aggiunto un ID chiamato “navigation”. Vedi il codice sotto.

<div id="navigation">
<h1>Demo: Link che s'illuminano con jQuery</h1>
<ul>
<li><a href="http://www.svegliatemplate.com/">Home</a></li>
<li><a href="http://www.svegliatemplate.com/category/blog/">Blog</a></li>
<li><a href="http://www.svegliatemplate.com/download/">Download</a></li>
</ul>

L’ID ha il duplice scopo e cioè  di segnalare l’obiettivo a jQuery e di poter impostare il colore del link sul nero (#000) tramite il CSS. Vedi il codice del CSS sotto.

<style type="text/css">#navigation li a{ color: #000; }</style>

Nell’Head della pagina bisogna ricordarci di collegare i 3 script, ovvero jQuery, il plugin per l’animazione del colore e lo script fatto da me per animare il colore dei link denominato appunto link-luminosi.js. Vedi sotto:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: Link che s'illuminano con jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/link-luminosi.js"></script>
<script type="text/javascript" src="js/jquery-animate-colors.js"></script>
<style type="text/css">#navigation li a{ color: #000; }</style>
</head>

Non resta quindi che dare una rapida occhiata al codice in modo che possiate modificarlo come volete.

Il selettore indica di agire su “#navigation li a” cioè su tutti i link (a) dell’elenco (li) che fanno riferimento #navigation.

Dopo abbiamo l’hover che è l’azione, l’hover ha due stati, quando ci passiamo sopra e quando da sopra ci allontaniamo. Come vedete quando si va sopra parte l’animazione del colore che lo porta dal colore di partenza (il nero #000 impostato dal CSS) al colore impostato da me, in questo caso il viola #FF00FF. Quando ci allontaniamo con il mouse dal link avviene il contrario,  dal viola si torna al nero #000).


$(function() {
$('#navigation li a').hover(function() {

 $(this).animate({'color' : '#FF00FF'}, 200);
 },
 function() {

 $(this).animate({'color' : '#000'}, 200);

 });
});

Non resta quindi che lasciarvi i link per la demo live e il download dello script comprensivo di demo.

No Responses

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *