Pune-ți textul în mișcare cu aceste efecte orbitoare

Tendința de a pune totul în mișcare stăpânește în aceste zile. Nu poți să nu urmărești această nebunie și să dezvolți o obsesie de a injecta viață în fiecare detaliu al unui site web. Era statică a dispărut. Totul este dinamic. Și știi ce? Utilizatorii sunt perfect conștienți de asta.

Pentru unii, aceasta este o veste proastă, deoarece va fi nevoie de eforturi herculeene pentru a păcăli utilizatorii să creadă că un site web static aduce o experiență interesantă. Pentru alții, este o oportunitate de a te arăta, de a-ți dezvălui geniul interior și de a te lăsa cufundat în lumea nebuniei dinamice.

Dacă încă ești blocat să crezi că singurul lucru pe care îl poți face cu tipografia este să folosești un tip de literă neobișnuit sau un efect de hover extravagant, atunci vom dovedi că te înșeli. Puteți face minuni cu tipografia, transformând-o într-un lucru care nu va ceda altora în ceea ce privește crearea unei impresii.

Și dacă nu sunteți fan al soluțiilor imersive sau grele, atunci aceasta este într-adevăr o cale de ieșire. Pentru a vă oferi un început solid, am adunat câteva fragmente de cod incredibile în care literele au fost puse în mișcare cu pricepere, aducând un rezultat excelent.

Shattering Text Animation de Arsen Zbidniakov

Uită-te la Shattering Text Animation de Arsen Zbidniakov. Nu este genial? Soluția nici nu copleșește vizitatorii cu multă acțiune și dinamică inutilă și nici nu vă supraîncărcă sistemul. Pur și simplu funcționează, lăsând pe toată lumea într-o stare „wow”.

Realizat cu ajutorul instrumentelor GSAP și al căii SVG, acest efect zdrobitor care asambla și dezasambla textul este pur și simplu incredibil. Mai mult, treceți cursorul mouse-ului peste el și veți avea ocazia să controlați viteza procesului, încetinind totul. Este pur și simplu fenomenal.

Animație text de Szenia Zadvornykh

La fel ca primul nostru exemplu, acest fragment de cod prezintă o animație de asamblare și dezasamblare a textului. Cu toate acestea, de data aceasta artistul folosește Three.js pentru a aduce totul la viață. Aceasta este o altă explozie controlabilă. Da, m-ai citit bine: poți controla și viteza animației făcând clic și trăgând. Și dacă vă place acest experiment, Szenia are câteva exemple mai distractive. Uită-te doar la profilul lui.

Tipare grafică în mișcare și un alt experiment de Ara

Ara are mai multe experimente uimitoare cu tipografie. Ambele exemple de mai jos sunt abstracte, bazate pe manipulări geometrice și simt și arată high-tech. În unele privințe, sunt chiar puțin bizare.

În primul exemplu, textul este compus din bucăți minuscule care formează încet, dar sigur, un tunel 3D de particule.

În al doilea, fiecare simbol este construit din poligoane primitive precum triunghiuri, pătrate și dreptunghiuri care sunt puse în mișcare. Se simte ca și cum mâna digitală a cuiva le împletește pe toate.

Animație text GSAP de Nate Wiley

Nate Wiley a transformat Split Text de la Greensock în avantajul său, recreând o animație de text minunată. El ia o bucată obișnuită de text și o sufla în fragmente minuscule, unde fiecare este un simbol. După explozie, personajele se mișcă în diferite direcții și dispar fără probleme.

Tipografie CSS Motion: Exploding Text de Dudley Storey

Spre deosebire de exemplele anterioare în care tehnologiile de vârf stau în spatele frumuseții soluțiilor, aici mișcarea bazată pe CSS conduce spectacolul. Dudley Storey pune în acțiune animații de cadre cheie CSS, tranziții, JavaScript, SVG și puțină magie Adobe Illustrator. Cuvântul se sparge puțin și apoi se rupe în bucăți poligonale în așa fel încât să îl poți citi în continuare. Dacă doriți să adăugați brutalitate elegantă tipografiei dvs., acest efect este cu siguranță un punct de plecare.

Multe pictograme în 3D folosind Three.js de Yasunobu Ikeda

În timp ce Nate Wiley aruncă în aer text, Yasunobu Ikeda, dimpotrivă, forțează particulele care sunt împrăștiate haotic pe ecran să se transforme în text. Aici particulele nu sunt altceva decât niște pictograme minuscule. Autorul folosește Three.js pentru a recrea această animație 3D superbă.

Text animat SVG Path de Tamino Martinius

Tamino Martinius beneficiază de manipulări mai tradiționale prin utilizarea căilor SVG. Datorită formelor elegante, liniilor ultra-subțiri și comportamentului lichid, animația emană eleganță și rafinament. Deși nu este la fel de uimitor ca primul nostru exemplu, puterile sale constau în capacitatea de a se potrivi cu numeroase proiecte, deoarece este cu siguranță o soluție practică.

Pentru utilizare mai practică

Apropo de asta, am inclus și câteva soluții inspiratoare și practice. Aici, tipul este pus în mișcare, astfel încât să puteți face pași de bebeluș în această direcție.

În timp ce primele două exemple prezintă efecte care pot fi benefice pentru slogan și fraze captivante, cea din urmă este o soluție interesantă pentru blocurile obișnuite de text.

Gândește – creează ciclu de Mikael Ainalem

Pixul lui Mikael Ainalem arată o animație ciclică în care cuvintele sunt evidențiate printr-o rotație. Este o modalitate excelentă de a ghida utilizatorii de la un cuvânt la altul.

PRESAT de Tryggvi Gylfason

Tryggvi Gylfason adaugă o linie în mișcare care alunecă de la stânga la dreapta și forțează literele să o urmeze, fie apăsând, fie trăgând simbolurile unui cuvânt. Efectul este mic, dar captivant.

Derulare text estompare în mișcare cu TweenMax de Ignacio Correia

Ignacio Correia furnizează text cu efect de estompare a mișcării. Când vă deplasați în jos într-un ritm alert, textul se estompează într-un punct aproape alb. Pe măsură ce încetinești, cuvintele devin mai puțin obscure.

Un caz pentru utilizarea animației în tipografie

Aceste animații tipografice ne obligă să ne oprim și să ne bucurăm de acțiune. Sunt la fel de inspirate și atrăgătoare ca și animațiile care pot fi văzute în alte elemente, cum ar fi zonele eroilor.

Din păcate, nu vedem multe dintre ele în sălbăticie. Se pare că toată lumea este obsedată să folosească animații pe tot ecranul pline de acțiune în loc să pună în mișcare litere simple. Dar, așa cum am văzut aici, aceste efecte pot avea un impact la fel de mare asupra utilizatorilor.