Metti in movimento il tuo testo con questi effetti abbaglianti

La tendenza a mettere in moto tutto è al giorno d'oggi. Non puoi fare a meno di seguire questa follia e sviluppare l'ossessione di iniettare vita in ogni dettaglio di un sito web. L'era statica è finita. Tutto è dinamico. E tu sai cosa? Gli utenti ne sono perfettamente consapevoli.

Per alcuni, questa è una cattiva notizia, dal momento che ci vorranno sforzi erculei per indurre gli utenti a credere che un sito Web statico porti un'esperienza emozionante. Per gli altri è un'opportunità per mettersi in mostra, rivelare il tuo genio interiore e lasciarsi travolgere dal mondo della follia dinamica.

Se sei ancora bloccato a credere che l'unica cosa che puoi fare con la tipografia è usare un carattere tipografico insolito o un effetto hover stravagante, allora ti dimostreremo che hai torto. Puoi fare miracoli con la tipografia, trasformandola in una cosa che non cederà agli altri in termini di creazione di un'impressione.

E se non sei un fan delle soluzioni immersive o pesanti, allora questa è davvero una via d'uscita. Per darti un solido inizio, abbiamo raccolto diversi incredibili frammenti di codice in cui il lettering è stato abilmente messo in moto, ottenendo un risultato eccellente.

Animazione di testo sconvolgente di Arsen Zbidniakov

Basta guardare Shattering Text Animation di Arsen Zbidniakov. Non è geniale? La soluzione non sovraccarica i visitatori con molta azione e dinamiche non necessarie né sovraccarica il tuo sistema. Funziona e basta, lasciando tutti in uno stato "wow".

Realizzato con l'aiuto degli strumenti GSAP e del percorso SVG, questo effetto sconvolgente che assembla e disassembla il testo è semplicemente incredibile. Inoltre, passa il cursore del mouse su di esso e avrai l'opportunità di controllare la velocità del processo, rallentando tutto. È semplicemente fenomenale.

Animazione del testo di Szenia Zadvornykh

Proprio come il nostro primo esempio, questo frammento di codice mostra un'animazione di assemblaggio e disassemblaggio del testo. Tuttavia, questa volta l'artista utilizza Three.js per dare vita a tutto. Questa è un'altra esplosione controllabile. Sì, hai letto bene: puoi anche controllare la velocità dell'animazione facendo clic e trascinando. E se ti piace questo esperimento, Szenia ha alcuni esempi più divertenti. Basta controllare il suo profilo.

Carattere tipografico Motion Graphic e un altro esperimento di Ara

Ara ha diversi esperimenti strabilianti con la tipografia. Entrambi i seguenti esempi sono astratti, basati su manipolazioni geometriche e sembrano high-tech. In un certo senso sono anche un po' bizzarri.

Nel primo esempio, il testo è composto da minuscoli pezzi che lentamente ma inesorabilmente formano un tunnel 3D di particelle.

Nel secondo, ogni simbolo è costruito da poligoni primitivi come triangoli, quadrati e rettangoli che vengono messi in movimento. Sembra che la mano digitale di qualcuno stia tessendo tutto insieme.

Animazione di testo GSAP di Nate Wiley

Nate Wiley ha trasformato il testo diviso da Greensock a suo vantaggio, ricreando una meravigliosa animazione di testo. Prende un normale pezzo di testo e lo soffia in minuscoli frammenti, dove ognuno è un simbolo. Dopo l'esplosione, i personaggi si muovono in varie direzioni e scompaiono dolcemente.

Tipografia CSS Motion: Exploding Text di Dudley Storey

A differenza degli esempi precedenti in cui le tecnologie di fascia alta stanno dietro alla bellezza delle soluzioni, qui il movimento basato su CSS fa da padrona. Dudley Storey mette in azione animazioni di fotogrammi chiave CSS, transizioni, JavaScript, SVG e un po' di magia di Adobe Illustrator. La parola si frantuma un po' e poi si rompe in pezzi poligonali in modo tale che tu possa ancora leggerla. Se vuoi aggiungere un'elegante brutalità alla tua tipografia, questo effetto è sicuramente un punto di partenza.

Molte icone in 3D utilizzando Three.js di Yasunobu Ikeda

Mentre Nate Wiley spazza via il testo, Yasunobu Ikeda, al contrario, costringe le particelle che sono caoticamente sparse sullo schermo a formare un testo. Qui le particelle non sono altro che minuscole icone. L'autore usa Three.js per ricreare questa splendida animazione 3D.

SVG Path testo animato di Tamino Martinius

Tamino Martinius beneficia di manipolazioni più tradizionali utilizzando i percorsi SVG. Grazie alle forme eleganti, alle linee ultrasottili e al comportamento simile a un liquido, l'animazione trasuda eleganza e raffinatezza. Sebbene non sia strabiliante come il nostro primo esempio, i suoi poteri risiedono nella capacità di adattarsi a numerosi progetti poiché è sicuramente una soluzione pratica.

Per un uso più pratico

A proposito, abbiamo incluso anche alcune soluzioni stimolanti e pratiche. Qui, il tipo è messo in moto in modo che tu possa fare piccoli passi in questa direzione.

Mentre i primi due esempi presentano effetti che possono essere utili per slogan e frasi accattivanti, il secondo è una soluzione interessante per blocchi di testo regolari.

Pensa: crea il ciclo di Mikael Ainalem

La penna di Mikael Ainalem mostra un'animazione ciclica in cui le parole sono evidenziate a rotazione. È un modo eccellente per guidare gli utenti da una parola all'altra.

PRESSATO di Tryggvi Gylfason

Tryggvi Gylfason aggiunge una linea mobile che scorre da sinistra a destra e costringe le lettere a seguirla, premendo o tirando così i simboli di una parola. L'effetto è piccolo ma accattivante.

Sfocatura movimento di scorrimento del testo con TweenMax di Ignacio Correia

Ignacio Correia fornisce al testo un effetto di sfocatura movimento. Quando scendi rapidamente, il testo diventa sfocato in una macchia quasi bianca. Man mano che rallenti, le parole diventano meno oscure.

Un caso per l'uso dell'animazione nella tipografia

Queste animazioni tipografiche ci costringono a fermarci e goderci l'azione. Sono stimolanti e accattivanti come le animazioni che possono essere viste in altri elementi, come le aree degli eroi.

Sfortunatamente, non ne vediamo molti in natura. Sembra che tutti siano ossessionati dall'uso di animazioni a schermo intero ricche di azione invece di mettere in movimento semplici caratteri. Ma come abbiamo visto qui, questi effetti possono avere un impatto altrettanto importante sugli utenti.