Ridimensionare il Testo con FitText e jQuery

Ridimensiona il testo con FitText e jQuery

Oggi vedremo come creare, con l'aiuto di jQuery e della classe di funzioni FitText, dei blocchi di testo nelle nostre pagine che si adattano automaticamente alla pagina, o al suo container a seconda della dimensione del browser.

E’ consigliabile utilizzare questa tecnica con i mediaqueries, in modo da rendere il sito può adattabile possibile, il concetto é semplice, FitText non fa altro che adattare e ridimensionare il testo a seconda delle dimensioni dell’oggetto che lo contiene.

Passiamo subito all’esempio pratico!

Requisiti:

Includiamo nella nostra pagina le due librerie, la prima la pescheremo direttamente dalla CDN di Google, la seconda dalla cartella dell nostro test, inseriamo quindi nella pagina tra i tag HTMLele seguenti righe nel corrispettivo ordine:

A questo punto la nostra pagina ha caricato tutto il necessario, creiamo ora la funzione JavaScript che ci permetterà di assegnare ai selettori il rispettivo ridimensionamento:

Ed infine creiamo gli elementi HTML:

A questo punto apriamo la pagina nel nostro browser e espandiamo e comprimiamo la finestra per vedere il nostro programma in azione!

Alla prossima puntata.

Lascia il tuo Pensiero