TextPuff: un plugin jQuery per un effetto fade pulsing del testo
Spesso trovare un effetto di hover adatto al menu di navigazione è più difficile di quanto sembri. Oggi vi presento un plugin di jQuery che crea un effetto di pulsazione e dissolvenza al testo a cui è applicato.
Un effetto fade pulse
L’effetto si basa su un’idea di Sideroad. L’animazione di pulse da lui realizzata sembrava perfetta per il sito che stavo realizzando; tuttavia la dipendenza da jQuery UI e il mancato funzionamento su Internet Explorer mi hanno spinto a creare una versione personalizzata.
Per imitare l’effetto puff di jQuery UI su cui la versione di Sideroad si basa, questo plugin all’evento mouse enter crea una copia dell’elemento a cui viene applicato e ne ingrandisce il testo facendolo sparire con una dissolvenza.
Personalizzazioni
Il plugin permette di personalizzare a piacere l’effetto regolando alcuni parametri. Eccoli elencati di seguito, con i loro relativi valori predefiniti:
$( '#target' ).puff({
// Durata dell'anumazione in millisecondi
duration: 500,
// Fattore di ingrandimento della dimensione del carattere
scale: 10,
// Numero di pulsazioni
times : 1,
// Esegue le pulsazioni contemporaneamente
simultaneous: true,
// Offset X di spostamento finale
offsetX: -10,
// Offset Y di spostamento finale
offsetY: -5,
// Colore della pulsazione (false = identico all'elemento)
color: false,
// Colore dello sfondo della pulsazione (false = identico all'elemento)
backgroundColor: false,
// Rimuove eventuali sfondi dell'elemento dalla pulsazione
textOnly: true
});
Conclusioni
Il plugin è distribuito sotto licenza MIT e quindi potete liberamente utilizzarlo e modificarlo se pensate che possa fare anche al caso vostro. Se avete suggerimenti o idee non esitate a commentare ed aggiungere i vostri miglioramenti.