Cum să stivați și să animați textul folosind efectele de defilare Divi

Folosirea efectelor de defilare Divi pentru a stiva și a anima textul pe defilare este o tehnică de design unică care poate fi utilizată pentru a da viață titlurilor paginii. Trucul este să folosești opțiunile de poziție ale lui Divi pentru a stiva literele absolut astfel încât să stea direct una peste alta. Apoi, puteți muta literele orizontal și vertical folosind efectele de derulare.

Verifică!

Trage cu ochiul

Iată o privire rapidă asupra animației textului pe care o vom construi în acest tutorial.

Abonați-vă la canalul nostru Youtube

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl 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?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Cum să stivați și să animați textul în Divi

Configurarea secțiunii și rândului

Mai întâi, creați un rând cu o coloană în secțiunea obișnuită.

Setări secțiune

Înainte de a adăuga module, deschideți setările secțiunii și actualizați următoarele:

• Culoare fundal: rgba (201,245,255,0,35)
• Garnitura: 14vw sus, 14vw jos

Setări rând

Apoi, deschideți setările rândului și actualizați următoarele:

• Lățime maximă: 60%
• Alinierea rândurilor: centru
• Înălțime: 20vw

Setăm înălțimea la o valoare specificată, deoarece vom poziționa modulele de text în interiorul rândului absolut.

Adăugarea modulelor de text stivuite care animă la plimbare

Acum că secțiunea și rândul sunt în configurare, putem începe să adăugăm modulele de text care vor compune designul titlului nostru. Primul modul de text va include textul principal al titlului. Următoarele trei module de text vor conține o singură literă care va fi utilizată pentru a stiva deasupra primei permisiuni a titlului și apoi pentru a anima pe scroll.

Să începem prin a adăuga modulul text cu titlul principal.

Adăugați modulul de text nr. 1

Adăugați un nou modul de text pe rând.

Apoi actualizați modulul text cu următorul conținut.

<h2><span style="color: rgba(83,144,193,0.1)">D</span>esign</h2>
that jumps off the page

• Font text: Bungee Hairline
• Greutatea fontului textului: Bold
• Dimensiune text text: 4vw
• Înălțimea liniei de text: 1,5em
• Titlul 2 Font: Bungee Shade
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Culoarea textului:
• Rubrica 2 Dimensiune text: 12vw
• Lățime: 100%

• Poziție: Absolută

Adăugați modulul de text nr. 2

Următorul modul de text va fi folosit ca prima literă pentru a suprapune prima literă a antetului. Pentru a porni în mod rapid designul modulului de text, copiați primul modul de text.

Apoi actualizați conținutul modulului de text duplicat cu prima literă a textului antet („D”).

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

• Font text: Bungee Shade
• Greutatea fontului textului: Bold
• Culoare text text: rgba (83.144.193,0.3)
• Dimensiune text text: 12vw
• Înălțimea liniei de text: 1em

Efecte derulare

Modulul text cu litera „D” este acum stivuit direct deasupra literei „D” în primul modul text. Vom muta ușor litera pe scroll folosind o combinație de mișcare verticală și orizontală.

Mișcare verticală

Sub fila avansată, selectați fila mișcare verticală și actualizați următoarele:

• Activați mișcarea verticală: DA
• Offset de pornire: 0 (la 20%)
• Decalaj mediu: -0,5 (între 40% și 60%)
• Offset final: 0 (la 80%)

Dacă sunteți nou la opțiunile de efect de derulare în Divi, valorile procentuale de sus indică punctele de locație din fereastra browserului. Fiecare valoare procentuală corespunde compensărilor de mai jos (început, mijloc și sfârșit). Deci, pe măsură ce utilizatorul derulează, litera „D” va începe să animeze (de la un offset de pornire „0”) când atinge 20% din partea de jos a ferestrei. Va continua să animeze (în sus) până când ajunge la 40% din partea de jos a ferestrei de vizualizare și apoi se menține la decalajul „-0,5” până când ajunge la 60% din partea de jos a ferestrei de vizualizare. Odată ce atinge punctul de 60%, va începe să revină la offset-ul original „0” și se va opri din animare atunci când atinge 80% din partea de jos a ecranului.

Mișcare orizontală

Pentru a oferi modulului text mișcare orizontală, selectați fila mișcare orizontală și actualizați următoarele (valorile vor fi aceleași ca mișcarea verticală):

• Activați mișcarea orizontală: DA
• Offset de pornire: 0 (la 20%)
• Decalaj mediu: -0,5 (între 40% și 60%)
• Offset final: 0 (la 80%)

Adăugați modulul de text nr. 3

Creați al treilea modul de text (sau litera „D”) prin duplicarea modulului de text anterior.

Actualizați efectele de derulare

Apoi actualizați următoarele efecte de derulare.

Mișcare verticală

• Decalaj mediu: -1

Mișcare orizontală

• Decalaj mediu: 1

Actualizați culoarea textului

Actualizați culoarea textului după cum urmează:

• Culoare text text: rgba (83.144.193,0.5)

Adăugați modulul de text nr. 4

Lucrurile ar putea deveni mai greu de selectat în acest moment în vizualizarea desktop. Implementați modul de vizualizare wireframe și copiați modulul text anterior pentru a crea litera noastră finală.

Actualizați culoarea textului

Actualizați culoarea textului după cum urmează:

• Culoarea textului textului: # 5390c1

Actualizați efectele de derulare

Apoi treceți la fila avansată și reglați efectele de derulare după cum urmează:

Mișcare verticală

• Decalaj mediu: -1,5

Mișcare orizontală

• Offset mediu: 1,5

Adăugați marjă la secțiunea pentru testare

Pentru a testa designul pe o pagină live, veți avea nevoie de spațiu pentru derulare. Putem face acest lucru cu ușurință adăugând niște margini de sus și de jos la secțiune. Deschideți setările secțiunii și actualizați următoarele:

• Marja: 40vw sus, 40vw jos

Rezultat final

Acum putem verifica în cele din urmă rezultatul final pe o pagină live.

Iată-l pe mobil.

Simțiți-vă liber să experimentați cu diferite fonturi folosind funcția de căutare și înlocuire a Divi.

Gânduri finale

Această postare ar trebui să pună în funcțiune creativitatea dvs. pentru noi modalități de a anima textul pe scroll. Acest lucru va funcționa bine pentru titlurile secțiunilor, deoarece utilizatorul va trebui să deruleze secțiunea (de sus în jos) și să experimenteze întreaga durată a efectului de derulare.

Și, gândindu-ne la asta, același concept ar funcționa și pentru imagini și icoane.

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!