10 fantastici frammenti di codice CSS e JavaScript con testo animato

Puoi creare effetti di testo piuttosto abbaglianti con CSS di base e poche righe di JavaScript. Questi effetti vanno dalle animazioni di visualizzazione del testo alle rotazioni 3D o qualsiasi altra cosa tu possa immaginare.

E in questo post ho catalogato 10 degli esempi più interessanti da tutto il Web che mostrano cosa puoi fare con solo un po' di testo stilizzato e codice CSS.

Potrebbero piacerti anche questi strumenti di animazione CSS.

1. Animazione del titolo

Questo effetto titolo animato di Robin Treur segue lo stile di molti film o videogiochi. Le lettere assumono un effetto 3D sporgente utilizzando le ombre del testo CSS3 insieme a una leggera inclinazione diagonale.

Lo stile di animazione in dissolvenza mi ricorda i film classici degli anni '30 con lo stesso testo inclinato. Tutto è controllato tramite CSS ma il pulsante "riavvia" è costruito utilizzando JavaScript. In questo modo puoi riprodurre l'animazione più volte per avere un aspetto migliore.

2. In frantumi

La creazione di testo spezzato e spezzato è un compito semplice con strumenti come After Effects, ma creare un'animazione di frammentazione del testo con il codice è molto più difficile, rendendo questa penna di Arsen Zbidniakov piuttosto impressionante.

Il testo è in realtà costruito utilizzando forme SVG che rendono un po' più semplice il processo di animazione. Ciò significa anche che non puoi selezionare, copiare o interagire con il testo come di consueto.

Ma puoi aggiungere un effetto simile al tuo sito se lo usi per un logo o un altro elemento di pagina non interattivo.

3. Lettere contorte

Lo sviluppatore Mamun Khandaker ha messo insieme questa raccolta di animazioni di lettere contorte. Ogni stile di animazione ha un nome diverso e puoi sfogliarli tutti in questa penna.

Ho potuto vedere questi effetti di testo utilizzati sulle pagine di destinazione o sulle home page di uno strumento/webapp. Questi catturano immediatamente l'attenzione e lasciano un'impressione duratura sul visitatore. Inoltre sono tutti realizzati con CSS puro al 100% e super facili da modificare.

4. Alfabeto pixel

Questo effetto pixel animato unico è decisamente strano, ma stranamente ipnotizzante. Si basa principalmente su JavaScript ed è stato creato dallo sviluppatore Georgi Nikoloff come un modo per giocare con l'elemento canvas HTML5.

Utilizza Noto Serif come base dei caratteri e converte le lettere in elementi malleabili all'interno dell'elemento canvas. JavaScript suddivide le lettere in punti più piccoli e questi costituiscono la base dell'animazione.

Non posso dire che questo avrebbe molto uso pratico, ma è una testimonianza di quanto sia arrivata l'animazione web.

5. Carosello di digitazione

Questo effetto è notoriamente popolare su piccoli portafogli e siti Web di agenzie. L'animazione del testo di digitazione appare spesso nell'intestazione di un sito e imita l'aspetto di qualcuno che digita in un elaboratore di testi.

Tutto è contenuto all'interno di un elemento con un buon mix di animazione CSS e JavaScript. A volte vedrai che i siti web lo utilizzano per elencare le descrizioni del loro lavoro, della loro storia o dei clienti con cui hanno lavorato.

È sicuramente un effetto divertente se usato con moderazione . Poiché è visibile solo una parola alla volta, limita la leggibilità della pagina, ma se usata con parsimonia questo è un effetto molto interessante che chiunque può copiare.

6. Tigre Tigre

Prendendo in prestito parole dalla poesia di William Blake "The Tyger", questa animazione davvero unica di Joseph Martucci cattura davvero la tua attenzione.

L'attenzione qui non è tanto sul contenuto, quanto piuttosto sugli stili tipografici e sulle animazioni. Ogni "segmento" del testo ha il proprio stile con contorni del testo ed effetti luminosi. È un ottimo esempio di come puoi modellare una home page per animare il testo in sequenza usando setTimeout() .

7. Scatta SVG

La libreria open source Snap.svg consente a chiunque di creare immagini SVG ad alta risoluzione con solo un po' di codice. Questo è molto più facile che imparare un programma come Illustrator e ti consente di animare proprio come questo divertente esempio creato da Alexis Blondin.

Tutte le lettere vengono create dinamicamente tramite JavaScript, inclusi i caratteri casuali utilizzati nell'animazione. Il moderno supporto SVG è enorme e questi tipi di immagine possono cambiare radicalmente il modo in cui creiamo siti Web nei prossimi anni. Questa animazione Snap.svg è solo un esempio ed è sicuramente interessante.

8. Animazione della parentesi

Ecco un'altra tecnica di animazione del testo abbastanza comune che vedo sempre. Utilizza parentesi con testo rotante quasi come un rolodex sulla pagina.

Questa animazione imita l'effetto del carosello di digitazione che ho menzionato in precedenza, tranne per il fatto che può essere realizzato solo con i CSS. Si basa su un'animazione in loop personalizzata che si sposta da un fotogramma chiave CSS all'altro, ogni fotogramma visualizza una parola o una frase diversa nel testo rotante.

Trovo questo effetto molto più sottile e più facile da leggere su una home page. Se stai cercando dei fantastici effetti di testo per la tua home page, questa sarebbe una scelta eccellente.

9. L'indistruttibile Kimmie Schmidt

Questo dolce effetto logo è stato preso in prestito dalla serie Netflix "Unbreakable Kimmie Schmidt". Tutto è creato con CSS compresi gli stili di testo e le animazioni personalizzate.

Il corpo della pagina ha una classe che avvia l'animazione e questa classe viene aggiunta alla pagina usando JavaScript. Da lì è tutto puro CSS. Utilizza principalmente un sacco di trasformazioni per creare l'effetto di rimbalzo sorprendentemente realistico.

È un altro esempio di quanto CSS3 può fare se sai come usarlo.

10. Riempimento del testo SVG

Infine, arriviamo a questa animazione di riempimento SVG davvero unica che utilizza un mix di ombre del riquadro e la proprietà del tratto CSS.

Questo testo è costruito interamente con SVG, ma è anche selezionabile in modo da poter copiare/incollare lettere come un normale testo. È completamente compatibile con tutti i browser e l'animazione è abbastanza sottile da poter essere inserita in qualsiasi sito web.

Tutte queste animazioni di testo portano qualcosa di nuovo in tavola. Potresti non trovarli tutti pratici o utilizzabili nel tuo lavoro, ma dimostrano che quasi tutto è possibile con il giusto approccio.