LetterFlipper, un plugin javascript per giocare con i testi.
L'altra sera avevo bisogno di un po' di sano "cazzeggio" e per rilassarmi ho realizzato un semplice script basato sul framework Prototype, ispirandomi a uno snippet Javascript pubbliccato su CSSTRICKS, e rivisto sotto forma di plugin per JQuery anche da Don Burks. ecco la demo del mio letterFlipper in azione.
In pratica il funzionamento è molto semplice; al passaggio del mouse sopra il testo viene richiamata in modo ricorsivo una funzione per cambiare lettera con un leggero delay fino a scorrere tutte le lettere delle parole, tornando alla fine dell'effetto alla lettera originale. Un effetto già visto in alcuni siti basati sulla tecnologia flash. L'utilizzo è elementare, basta invocare il plugin sull'elemento voluto e specificare alcuni parametri opzionali:
new letterFlipper('test', {
timeout: 50, //Milliseconds between letter rotations
container: 'span', //Type of element the text is in
offset: 0 //Offset of letters to use for scrolling
});
Un piccola nota utile per l'uso è che l'effetto è più gradevole se applicato su testi con tipo di carattere monospaced, tipo courier: rispetto agli script originali il mio codice non richiede l'aggiunta di markup html aggiuntivo. Non ho "debuggato troppo", ma sembrerebbe funzionare un po' dappertutto: browser mozilla, webkit e microsoft.
- Social:
L'html nel testo del commento è abilitato: i tag consentiti sono: a, em, strong, p, code, pre, quote e br.
Gli attributi dei tag utilizzabili sono title e href.