Cum să animați scrisorile pentru modele de text unice în Divi

Animația a devenit o parte comună a experienței utilizatorului pentru site-urile web moderne. În afară de faptul că arată grozav, poate adăuga și un element interactiv subtil care implică utilizatorul dând conținut la viață. Efectele de animație încorporate ale lui Divi vă permit să animați aproape orice element de pe o pagină cu diferite stiluri de animație.

În acest tutorial, vă voi arăta cum să animați litere pentru câteva modele de text unice în Divi. Prin introducerea literelor individuale într-un modul de text, puteți viza animația fiecărei litere cu diferite stiluri de animație, durată și întârzieri care vor face ca conținutul să iasă în evidență într-un mod creativ. Această tehnică este doar pentru scopuri de proiectare, deoarece literele care alcătuiesc conținutul nu vor fi foarte prietenoase cu SEO. Cu toate acestea, literele animate vă permit să împărtășiți povestea dvs. utilizatorilor într-un mod uimitor.

Să începem.

Trage cu ochiul

Descărcați GRATUIT schema de exemple de design de animație pentru scrisori

Pentru a pune mâna pe desenele de animație a literelor din acest tutorial, va trebui mai întâi să o descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Noțiuni de bază

Pentru acest tutorial, nu aveți nevoie decât de Divi. Vom construi proiectele de la zero folosind constructorul Divi de pe partea frontală. Pentru a începe, creați o pagină nouă, dați un titlu paginii dvs. și implementați clic pentru a utiliza Divi Builder. Apoi alegeți opțiunea „construiți de la zero” și faceți clic pentru a construi pe partea frontală.

Acum sunteți gata să proiectați!

Construirea aspectului pentru animarea literelor

Adăugarea secțiunii, rândului și coloanei

Continuați și creați o nouă secțiune obișnuită cu un rând cu o coloană.

Înainte de a începe să adăugăm modulele noastre de text (care vor conține litere albe), să adăugăm o imagine de fundal întunecată la secțiune. Deschideți setările secțiunii și adăugați o imagine de fundal. Folosesc o imagine de fundal abstractă din aspectul premade al paginii de destinație a companiei de investiții.

Crearea blocurilor de litere individuale cu module de text

Înainte de a începe să adăugăm animație la litere, trebuie mai întâi să creăm un modul de text separat pentru fiecare literă pe care dorim să o adăugăm. Pentru acest exemplu, vom crea textul „Divi Design”. Deoarece această frază de text include 11 spații de caractere (inclusiv spațiul dintre litere, va trebui să adăugăm 11 module de text diferite.

Continuați și adăugați un modul de text în coloană.

În caseta de conținut, adăugați prima literă din textul dvs., care în acest caz este litera „d”.

Apoi actualizați setările de proiectare a textului după cum urmează:

• Font text: Rubik
• Stil de text text: TT
• Culoarea textului textului: #ffffff
• Dimensiune text text: 80 px (desktop), 50 px (tabletă), 30 px (telefon)
• Înălțimea liniei de text: 1.6em
• Orientare text: centru

Apoi adăugați o animație la modulul text după cum urmează:

• Stil de animație: Slide
• Direcția animației: sus
• Durata animației: 600 ms
• Întârziere animație: 100 ms
• Animație Opacitate de pornire: 100%

Duplicați modulul text și actualizați conținutul cu litera „i”. Apoi creșteți întârzierea animației cu 100ms după cum urmează:

• Întârziere animație: 200 ms

Duplicați modulul text și actualizați conținutul cu litera „v”. Apoi creșteți întârzierea animației la 300 ms.

• Întârziere animație: 300 ms

Duplicați modulul text și actualizați conținutul cu litera „i”. Apoi măriți întârzierea animației la 400 ms.

• Întârziere animație: 400 ms

Pentru următorul modul de text dorim să adăugăm un spațiu gol. Duplicați modulul text și adăugați următorul html în caseta de conținut:

 

Nu este nevoie să actualizați întârzierea animației pentru aceasta.

Apoi copiați modulul text și actualizați conținutul cu litera „d”. Aceasta este prima literă din cuvântul „design”. Apoi măriți întârzierea animației la 500 ms.

• Întârziere animație: 500 ms

Continuați procesul de duplicare a modulului text și creșterea întârzierii animației cu 100 ms pentru fiecare dintre literele rămase care definesc cuvântul „proiectare”.

• Litera „e”: întârziere animație 600ms
• Litera „s”: întârziere animație 700ms
• Litera „i”: întârziere animație 800ms
• Litera „g”: întârziere animație 900ms
• Litera „n”: animare întârziere 1000ms

Iată cum arată designul până acum.

Adăugarea proprietății Flex pentru a alinia modulele pe orizontală

Nu chiar rezultatul pe care îl căutăm încă. Dar tot ce trebuie să facem este să aducem magic designul împreună, să adăugăm un mic fragment de css la coloana rândului. Pentru aceasta, deschideți setările de rând și adăugați următorul CSS personalizat la Elementul principal al coloanei.

display: flex;

Proprietatea Display: flex aliniază toate modulele pe orizontală într-un tabel flexibil care se va regla frumos la diferite lățimi ale browserului. Și deoarece modulele sunt într-un rând cu o coloană, designul nu se va rupe pe tablete sau dispozitive mobile.

De asemenea, trebuie să adăugăm o lățime personalizată a jgheabului pentru a scoate marginea de jos sub litere și a adăuga niște umpluturi de sus și de jos la rând, astfel încât literele să aibă spațiu de animat.

• Lățimea jgheabului: 1
• Căptușeală personalizată: 5vw sus, 5vw jos

Iată rezultatul final.

Adăugarea diferitelor stiluri de animație

Cu această configurare, puteți adăuga cu ușurință noi stiluri de animație pentru efecte complet unice. Pentru a face acest lucru, puteți profita de funcția multiselect a Divi pentru a actualiza toate modulele simultan. În partea frontală, țineți apăsată tasta Shift și faceți clic pe primul și ultimul modul de text. Apoi deschideți setările pentru unul dintre modulele selectate.

Aceasta va deschide setările modale ale elementului, care vă vor permite să actualizați setările pentru toate modulele selectate. Nu vrem să schimbăm întârzierea animației, deoarece vrem să păstrăm efectul în cascadă asupra fiecărei litere. Cu toate acestea, putem actualiza celelalte opțiuni de animație în diferite moduri pentru a crea rezultate complet unice.

Vă sugerez să copiați secțiunea înainte de a testa o nouă animație, astfel încât să puteți păstra exemplele anterioare.

Iată câteva exemple.

Animație text inversă cu zoom

Pentru a anima litere cu efect de zoom invers, actualizați setările elementului (setările pentru toate modulele) cu următoarele:

• Stil de animație: Zoom
• Regia de animație: Centru
• Intensitate animație: 200%

Iată rezultatul final.

Animație de text Rolling Wave

Pentru a anima litere cu efect de val rotativ, actualizați setările elementului (setările pentru toate modulele) cu următoarele:

• Stil de animație: Rotire
• Direcția animației: sus
• Intensitate animație: 100%

Iată rezultatul final.

Animație text Domino

Pentru a anima textul cu efect de domino, actualizați setările elementului (setările pentru toate modulele) cu următoarele:

• Stil de animație: Flip
• Direcția animației: Stânga
• Intensitate animație: 100%

Iată rezultatul final.

Animație text stand-up

Pentru a anima textul cu efect de domino, actualizați setările elementului (setările pentru toate modulele) cu următoarele:

• Stil de animație: Fold
• Direcția animației: sus
• Intensitate animație: 100%

Apoi adăugați perspectivă pentru a crea un element de design 3D adăugând următorul css la Elementul coloanei principale sub setările rândului.

Elementul principal al coloanei CSS:

perspective: 1000px;

Iată rezultatul final.

Animează scrisorile folosind o combinație de indicații de animație

Dacă doriți să fiți mai creativi, puteți anima litere folosind o combinație de efecte de animație. Pentru acest exemplu, voi folosi o combinație de direcții de animație și intensitate pentru stilul de diapozitive. Acest lucru ne va oferi o prezentare complet unică.

Iată cum să o faci.

În primul rând, copiați una dintre secțiunile pe care le-am construit anterior, astfel încât să putem obține un avans în procesul de proiectare.

Apoi ștergeți primele 4 module de text, astfel încât să fie afișat doar textul „design”.

Setări secțiune

Apoi, deoarece vrem ca unele dintre literele din animație să înceapă în afara ferestrei secțiunii, va trebui să adăugăm un mic fragment de css la setările secțiunii, după cum urmează:

overflow: hidden;

Acest lucru va păstra literele ascunse până când intră în secțiune.

Setări rând

Acum, pentru a ne asigura că modulele noastre de text (literele) rămân centrate, trebuie să adăugăm următoarele css la setările de rând:

display:flex;
justify-content: center;

Setări comune ale modulului de text

Utilizând selecția multiplă, actualizați toate cele șase module de text cu următoarele setări de elemente:

• Marja personalizată: 3% la stânga, 3% la dreapta
• Lățimea chenarului: 1 px
• Culoare margine: #ffffff

• Stil de animație: Slide
• Durata animației: 2000 ms
• Întârziere animație: 100 ms
• Intensitate animație: 300%

Aceasta se ocupă de setările de animație de bază, care vor fi comune tuturor modulelor de text. Acum putem regla individual setările de animație pentru acestea.

Setări individuale ale modulului text

În acest moment, ne putem distra modificând setările individuale ale modulului de text pentru a schimba direcția animației pentru fiecare. Acest lucru ne va permite să animăm scrisorile într-un mod complet unic. Pentru fiecare literă, actualizați direcția și intensitatea animației după cum urmează:

• Litera D
  Direcția animației: sus
• Litera E
  Direcția animației: Jos
• Litera S.
  Direcția animației: Stânga
  Intensitate animație: 80%
• Scrisoarea I
  Direcția animației: Corect
  Intensitate animație: 80%
• Litera G
  Direcția animației: Jos
• Litera N
  Direcția animației: sus

Iată designul final.

Iată cum arată pe mobil.

Gânduri finale

Cred că este sigur să spunem că Divi are multe modalități de a anima scrisorile odată ce ați configurat corect. Și trebuie să spun că a fost destul de greu să nu te mai joci cu setările de animație atunci când construiești aceste exemple. Există atât de multe variante posibile de încercat! Oricum, sper că acest lucru vă va oferi puțină inspirație pentru următorul dvs. proiect. Dacă este ceva, s-ar putea să doriți să o construiți doar pentru distracție.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!