Su richiesta di un lettore, oggi vi spiego come ricreare quell’effetto davvero piacevole quando passate su un link nella barra dei menu o nella sidebar. Tale effetto consiste in un graduale passaggio del colore del link da azzurrino a bianco. Questo effetto si chiama fading link ed è ispirato ai links di me.com, il sito del famoso servizio di Apple.
Come funziona
Questo effetto richiede jQuery e per crearlo ho preso spunto da un articolo di David Walsh, che tra l’altro ha reso disponibile il codice anche per crearlo con MooTools. Ecco quindi la guida su come creare tale effetto.
- Create un file javascript che contiene dwFadingLinks, il plugin per jQuery creato da David Walsh che è il cuore dello script. All’interno di tale file dovrete inserire il codice qui a basso che non ha bisogno di essere modificato.
/*
Class: dwFadingLinks
Author: David Walsh
Website: http://davidwalsh.name
Version: 1.0.0
Date: 10/08/2008
Built For: jQuery 1.2.6
*/
jQuery.fn.dwFadingLinks = function(settings) {
settings = jQuery.extend({
color: '#ff8c00',
duration: 500
}, settings);
return this.each(function() {
var original = $(this).css('color');
$(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
});
};
/* sample usage
$(window).bind('load', function() {
$('a.fade').fadingLinks('#f00',1000);
});
*/
- Ora ci serve la pagina dove dovrete inserire il richiamo a jQuery, al plugin dwFadingLinks, ed a jQuery UI (salvate questa pagina nel vostro computer), e dove metteremo lo script che chiamerà il plugin ed applicherà l’effetto. Ecco una semplice pagina-modello (ho inserito solo gli elementi fondamentali come head e body, inoltre dovete sostituire i percosi in maiuscolo con i vostri percorsi):
<html> <head> <script type="text/javascript" src="PERCORSO E NOME SCRIPT JQUERY"></script> <script type="text/javascript" src="PERCORSO E NOME SCRIPT PLUGIN DWFADINGLINKS"></script> <script type="text/javascript" src="PERCORSO E NOME SCRIPT PLUGIN JQUERY UI"></script> </head> <body> <p style="color:red">Passa qui sopra</p> </body> </html>
- Non ci resta che inserire lo script che aziona il plugin, vi basterà inserirlo dentro head della vostra pagina. Nel nostro caso il testo dentro tutti i tag paragraph (abbreviato in html con p) passerà da colore rosso a colore giallo in 300 millisecondi.
<script type="text/javascript">$(document).ready(function() {
$('p').dwFadingLinks({
color: 'yellow', /*modifica il colore di destinazione*/
duration: 300 /*durata in millisecondi del passaggio dal colore iniziale al colore finale*/
});
});
</script>
L’ultimo frammento di codice che vi ho postato è altamente personalizzabile e lo potete capire dai commenti che ho messo. Nella seconda riga del codice potrete modificare l’elemento a cui applicare l’effetto, “p” sarebbe l’elemento a cui noi abbiamo applicato l’effetto, ma potrebbe essere anche “div#pippo a” ad esempio, che verrà applicato a tutti i links dentro il div pippo.
Abbiamo dunque terminato questa mini-guida, spero sia stato chiaro, mi raccomando provate bene e seguite bene i passaggi, se qualcosa va storto commentate e cercherò di rispondervi.
Loading ...
Alberto Ziveri
Francesco di Lorenzo
Angelo Delicato
Pasquale Fusco
Light