10 texte animate uimitoare CSS și fragmente de cod JavaScript

Puteți realiza câteva efecte de text destul de uimitoare cu CSS de bază și câteva linii de JavaScript. Aceste efecte variază de la animații de afișare a textului la rotații 3D sau orice altceva vă puteți imagina.

Și în această postare am catalogat 10 dintre cele mai tari exemple de pe web, care arată ce poți face doar cu puțin text stilizat și cod CSS.

S-ar putea să vă placă și aceste instrumente de animație CSS.

1. Animație de titlu

Acest efect de titlu animat de Robin Treur urmează stilul multor filme sau jocuri video. Literele capătă un efect 3D proeminent folosind umbrele textului CSS3 împreună cu o oblică diagonală.

Stilul de animație cu fade-in îmi amintește de filmele clasice din anii 1930 cu același text înclinat. Totul este controlat prin CSS, dar butonul „repornire” este construit folosind JavaScript. În acest fel, puteți reda animația de mai multe ori pentru a obține o imagine mai bună.

2. Spărgătoare

Crearea de text spart este o sarcină simplă cu instrumente precum After Effects, dar crearea unei animații de distrugere a textului cu cod este mult mai dificilă, făcând acest stilou de Arsen Zbidniakov destul de impresionant.

Textul este de fapt construit folosind forme SVG, ceea ce face procesul de animație puțin mai ușor. Acest lucru înseamnă, de asemenea, că nu puteți selecta, copia sau interacționa cu textul ca de obicei.

Dar puteți adăuga un efect similar site-ului dvs. dacă îl utilizați pentru un logo sau un alt element de pagină neinteractiv.

3. Litere răsucite

Dezvoltatorul Mamun Khandaker a creat această colecție de animații cu litere răsucite. Fiecare stil de animație are un nume diferit și le puteți naviga pe toate în acest singur stilou.

Am putut vedea aceste efecte de text folosite pe paginile de destinație sau paginile de start pentru un instrument/aplicație web. Acestea captează imediat atenția și lasă o impresie de durată asupra vizitatorului. În plus, toate sunt realizate cu CSS 100% pur și foarte ușor de modificat.

4. Alfabetul pixelilor

Acest efect unic de pixeli animați este cu siguranță ciudat, dar ciudat de fascinant. Se bazează în principal pe JavaScript și a fost creat de dezvoltatorul Georgi Nikoloff ca o modalitate de a te juca cu elementul de pânză HTML5.

Folosește Noto Serif ca bază de font și convertește literele în elemente maleabile în interiorul elementului canvas. JavaScript descompune literele în puncte mai mici, iar acestea formează baza animației.

Nu pot spune că acest lucru ar avea o mare utilizare practică, dar este o dovadă a cât de departe a ajuns animația web.

5. Tastarea Carusel

Acest efect este notoriu de popular pe portofoliile mici și site-urile web ale agențiilor. Animația textului de tastare apare adesea în antetul unui site și imită aspectul cuiva care tastează într-un procesor de text.

Totul este conținut într-un singur element, cu o combinație bună de animație CSS și JavaScript. Uneori, veți vedea site-urile care folosesc acest lucru pentru a enumera descrierile muncii lor, sau istoricul lor sau clienții cu care au lucrat.

Este cu siguranță un efect distractiv atunci când este folosit cu moderație . Deoarece este vizibil un singur cuvânt la un moment dat, limitează lizibilitatea paginii, dar atunci când este folosit cu moderație, acesta este un efect foarte interesant pe care oricine îl poate copia.

6. Tyger Tyger

Împrumutând cuvinte din poemul lui William Blake „The Tyger”, această animație foarte unică de Joseph Martucci vă atrage cu adevărat atenția.

Accentul aici nu se pune atât pe conținut, ci mai degrabă pe stilurile tipografice și animațiile. Fiecare „segment” de text are propriul stil, cu contururi de text și efecte strălucitoare. Este un exemplu grozav al modului în care puteți stila o pagină de pornire pentru a anima textul secvențial folosind setTimeout() .

7. Snap SVG

Biblioteca open source Snap.svg permite oricui să creeze imagini SVG de înaltă rezoluție cu doar un pic de cod. Acest lucru este mult mai ușor decât învățarea unui program precum Illustrator și vă permite să animați la fel ca acest exemplu distractiv creat de Alexis Blondin.

Toate literele sunt create dinamic prin JavaScript, inclusiv caracterele aleatorii utilizate în animație. Suportul modern SVG este imens și aceste tipuri de imagini pot schimba radical modul în care construim site-uri web în următorii ani. Această animație Snap.svg este doar un exemplu și cu siguranță este una grozavă.

8. Animație cu paranteze

Iată o altă tehnică de animație a textului destul de comună pe care o văd tot timpul. Folosește paranteze cu text rotativ aproape ca un rolodex pe pagină.

Această animație imită efectul de carusel de tastare pe care l-am menționat mai devreme, cu excepția faptului că aceasta poate fi făcută doar cu CSS. Se bazează pe o animație în buclă personalizată care se mută de la un cadru cheie CSS la altul, fiecare cadru afișând un cuvânt sau o expresie diferită în textul rotativ.

Mi se pare că acest efect este mult mai subtil și mai ușor de citit pe o pagină de pornire. Dacă sunteți în căutarea unor efecte de text interesante pentru pagina dvs. de pornire, aceasta ar fi o alegere excelentă.

9. Instricabila Kimmie Schmidt

Acest efect dulce de logo a fost împrumutat din seria Netflix „Unbreakable Kimmie Schmidt”. Totul este creat cu CSS, inclusiv stilurile de text și animațiile personalizate.

Corpul paginii are o clasă care inițiază animația, iar această clasă este atașată paginii folosind JavaScript. De acolo, totul este CSS pur. În cea mai mare parte, folosește o grămadă de transformări pentru a crea efectul de sărituri surprinzător de realist.

Este încă un exemplu de cât de mult poate face CSS3 dacă știi cum să-l folosești.

10. Completarea textului SVG

În cele din urmă, ajungem la această animație de umplere SVG foarte unică, folosind un amestec de umbre casete și proprietatea stroke CSS.

Acest text este construit în întregime cu SVG-uri, dar este și selectabil, astfel încât să puteți copia/lipi litere ca textul obișnuit. Este pe deplin compatibil cu toate browserele, iar animația este suficient de subtilă încât să se potrivească în orice site web.

Toate aceste animații text aduc ceva nou pe masă. S-ar putea să nu le găsești pe toate practice sau utilizabile în propria ta muncă, dar dovedesc că aproape orice este posibil cu abordarea corectă.