Crearea unei animații de defilare de fundal de text este o modalitate unică de a adăuga texturi animate colorate textului dvs. site-ul web în timp ce un utilizator derulează pagina. Cu Divi, procesul este surprinzător de ușor odată ce înveți câteva tehnici cheie.
În acest tutorial, vom folosi doar puterea parametrilor încorporați ai Divi pentru a crea 3 modele unice care prezintă o animație colorată de defilare a fundalului textului. Vă vom arăta chiar și cum să creați o versiune întunecată a fiecărui design pentru un aspect complet nou.
Să începem!
Rezultat posibil
Iată o privire asupra proiectelor pe care le vom construi astăzi.
Design 1: gradient de fundal text cu efect de derulare orizontală
Acest prim design va avea un efect de derulare orizontală care animă un modul separator colorat în spatele unui modul text cu filtrul ecranului.
Adăugați o coloană
Pentru a începe, adăugați un rând cu o coloană la secțiunea implicită.
Adăugați un modul de text
Apoi adăugați un nou modul text în coloană.
Conținut
pentru cuprins coloană, inserați următorul cod HTML în casetă cuprins:
Formatarea textului
Apoi actualizați designul textului după cum urmează:
- Culoare fundal: #ffffff
- Stil de fonturi text: TT
- Culoarea textului: # 000000
- Dimensiune text: 100 px (desktop), 40 px (telefon)
- Spațiu litere text: 0.15em
- Înălțimea liniei de text: 1em
- Alinierea textului: centru
- Titlul fontului: Merriweather
- Greutatea fontului din titlu: bold
- Stilul fontului de titlu: TT
- Aliniere text antet: centru
- Culoare text antet: # 000000
- Dimensiune text antet: 200 px (desktop), 80 px (telefon)
- Spațiu de litere de titlu: 0.15em
- Înălțimea liniei de titlu: 1em
Căptușire și filtrare
Acum trebuie să adăugăm niște umpluturi și filtre de ecran la modulul text. Filtrul este necesar pentru ca acest design să funcționeze, deoarece acesta permite culorilor / modurilor de fundal să se afișeze în spatele textului.
Pentru a adăuga umplerea și filtrarea, actualizați următoarele:
- captusire: 15px inaltime, 20px joasa
- Mod Blend: Ecran
Notă: modul de amestecare a ecranului funcționează cel mai bine cu textul negru pe un fundal alb. Dacă am dori să folosim text alb pe un fundal negru, am folosi modul de amestecare Multiply.
Separator superior și inferior
După ce modulul nostru de text este complet, adăugăm câteva separatoare (deasupra și unul de sub modulul de text) pentru un element de design suplimentar.
Adăugați un separator inferior
Adăugați un nou modul de separare sub modulul text.
Setări mai mari de separare
Deschideți setările separatorului și selectați NO pentru a afișa separatorul.
Apoi actualizați fundalul și dați divizorului același mod de amestecare ca modulul de text după cum urmează:
- Culoare fundal gradient stânga: # 000000
- Culoare de fundal gradient din dreapta: #ffffff
- Direcția gradientului: 90deg
- Poziția de pornire: 48%
- Poziția finală: 0%
- Mod Blend: Ecran
Apoi actualizați înălțimea separatorului pe ecranul telefonului după cum urmează:
- Inaltime: 15px (telefon)
Adăugați separatorul superior
Pentru a crea divizorul superior, copiați divizorul inferior anterior și trageți-l deasupra modulului de text folosind zona de afișare a straturilor.
Apoi inversați culorile pe fundalul gradient.
Actualizați parametrii liniei
După ce separatoarele noastre superioare și inferioare vor fi poziționate, actualizați parametrii liniei după cum urmează:
- Lățimea jgheabului: 1 (pentru a elimina marginile inferioare dintre module)
- Lățime maximă: 600 pixeli (pentru a păstra un design coerent pe desktop și tabletă)
- Alinierea liniei: centru
- Garnitură: 0px înaltă, 0px mică
- Debord de orizontală: ascuns
- Debord vertical: ascuns
Creați un separator pentru culoarea de fundal a textului animat
Ultimul element al acestui prim design este divizorul pe care îl vom folosi pentru a anima culoarea de fundal a textului de pe pergament. Pentru a face acest lucru, adăugați un nou modul de separare sub divizorul inferior.
Apoi selectați NU pentru a afișa separatorul.
Setări divizor de fundal
Actualizați separatorul cu un fundal de gradient după cum urmează:
- Culoarea de fundal a gradientului stâng: # e02b20
- Culoare gradient dreapta fundal: # 8300e9
- Direcția gradientului: 90deg
- Poziția de pornire: 30%
- Poziția finală: 70%
Vrem ca înălțimea separatorului să fie suficient de mare pentru a colora tot textul nostru din modulul text și separatoarele de sus și de jos. Pentru acest design, setați înălțimea la 400 px.
- Înălțime: 400px
Apoi acordați divizorului o poziție absolută pentru ao poziționa direct deasupra celorlalte module. Utilizați indexul Z pentru a plasa divizorul în spatele celorlalte module.
- Poziție: Absolut
- Indicele Z: -1
Efecte de derulare a separatorului de fundal
Cu separatorul în poziție, tot ce trebuie să facem este să mutăm separatorul în spatele textului folosind efectele de defilare ale Divi. Pentru acest design, vom adăuga pur și simplu mișcare orizontală pe scroll.
Actualizați următoarele elemente:
Sub fila Mișcare orizontală ...
Birou
- Activați mișcarea orizontală: DA
- Start offset: 6 (la 20%)
- Offset mediu: 0 (la 40% -60%)
- Decalaj final: -6 (la 80%)
Telefon
- Start offset: 3
- Decalaj final: -3
De asemenea, asigurați-vă că setați declanșatorul efectului de mișcare în mijlocul clipului:
- Efect de declanșare a mișcării: mijlocul elementului
Adăugați spațiu de secțiune
Pentru a crea un spațiu de defilare temporară pentru a testa designul, adăugați următoarele la secțiunea:
- Marja: 80vh mai sus, 80vh mai jos
Ultimele gânduri
Desenele de animație de fundal text afișate în acest articol ar funcționa de fapt la fel de bine ca un design static fără adăugarea mișcării pe scroll. Cu toate acestea, efectele de defilare suplimentare duc într-adevăr designul la un nivel complet nou. Simțiți-vă liber să experimentați mai multe culori și efecte!
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Pentru sănătatea ta!
