Cum se proiectează o mască text cu animație de fundal pe scroll în Divi

Modelele Text Mask sunt surprinzător de ușor de creat folosind opțiunile încorporate ale Divi. Constructorul are toate ingredientele pentru crearea unui efect de mască text, inclusiv opțiuni pentru stiluri de text, fundaluri și moduri de amestecare. De fapt, am creat mai înainte modele de mască text folosind modurile de amestecare. Dar, cu efecte de derulare, putem duce proiectele de măști text la un nivel nou.

În acest tutorial, vă vom arăta cum să proiectați o mască text cu animație de fundal pe scroll în Divi. Designul este unic, iar efectul de derulare îl face să prindă viață.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra proiectelor pe care le vom construi în acest tutorial.

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 secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil î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.

Proiectarea unei măști text cu animație de fundal în Divi

Adăugați rând

Pentru a începe lucrurile, adăugați un rând cu două coloane la secțiunea obișnuită implicită.

Actualizați setările secțiunii

Înainte de a adăuga module, deschideți setările secțiunii și actualizați culoarea de fundal și căptușeala după cum urmează:

• Culoare fundal: # 750046

• Căptușeală: 0 px sus, 0 px jos

Actualizați setările rândului

După ce se realizează setările secțiunii, deschideți setările pentru rând și actualizați următoarele setări de proiectare:

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%
• Căptușeală: 0 px sus, 0 px jos

Este important să setați lățimea jgheabului la 1 și lățimea la 100%, deoarece vom folosi unitatea de lungime vw pentru textul nostru atunci când vom crea designul măștii de text. Deoarece unitatea de lungime vw se bazează pe lățimea browserului, este important ca containerele părinte (secțiune și rând) să aibă aceeași lățime ca browserul, care este 100%.

Actualizați setările coloanei 1

Masca și imaginea noastră text vor fi adăugate în coloana din stânga (coloana 1). Trebuie să adăugăm o culoare de fundal în coloană, astfel încât modurile de amestecare pe care le adăugăm la imagine și text să amestece / dezvăluie această culoare. De asemenea, trebuie să setăm revărsatul la ascuns, astfel încât atunci când animăm imaginea pe scroll, să nu vedem imaginea debordantă în afara coloanei.

Deschideți setările pentru coloana 1 și actualizați următoarele:

• Culoare fundal: # 750046
• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Crearea măștii de text

Pentru a crea masca de text, adăugați un modul de text în coloana 1.

Conținutul textului

Apoi adăugați cuvântul „divi” la conținutul corpului. Folosim un cuvânt de 4 litere, astfel încât să fie stivuit uniform pentru un design pătrat.

Fundal text

Apoi, adăugați o culoare de fundal alb la modulul text.

• Culoare fundal: #ffffff

Proiectare text

Apoi, sub fila Design, actualizați următoarele:

• Font text: Rubik Mono One
• Stil Font text: TT
• Culoarea textului textului: # 000000
• Dimensiune text text: 25vw (desktop), 50vw (tabletă și telefon)
• Înălțimea liniei textului: 0.8em
• Alinierea textului: centru

• Garnitura: 8vw sus, 8vw jos

Mod Blend text

Pentru a finaliza proiectarea măștii de text, adăugați următorul mod de amestecare:

• Blend Mode: ecran

Până în prezent, cele patru ingrediente cheie pentru acest efect de mască text sunt următoarele:

1. Fundalul coloanei
2. Fundal text alb
3. Text negru
4. Mod Blend ecran pe modulul Text

Modul de amestecare a ecranului multiplică straturile și produce o versiune mai ușoară a mixului. Cu modul de amestecare a ecranului, textul negru devine complet transparent, dezvăluind ceea ce se află în spatele său, care în acest caz este o culoare de fundal.

Adăugați o imagine de fundal

Pentru a adăuga imaginea de fundal la masca de text, creați un nou modul de imagine și încărcați o imagine de aproximativ 1700 x 2500 pix. Dimensiunea imaginii este importantă, astfel încât imaginea să acopere înălțimea și lățimea coloanei.

Design de imagine

Apoi actualizați următoarele setări de proiectare:

• Forțează lățimea completă: DA
• Blend Mode: ecran

Acest mod de amestecare nu este necesar pentru efectul de mască text, dar îmbină imaginea cu culoarea de fundal, astfel încât să se potrivească mai bine cu designul.

Poziția imaginii

Apoi, acordați imaginii o poziție absolută și actualizați indexul Z astfel încât să stea în spatele modulului text.

• Poziție: Absolută
• Indicele Z: -1

Efecte de derulare a imaginii

Odată ce designul imaginii este gata, accesați fila avansată și actualizați opțiunile efectului de derulare după cum urmează:

Sub fila Mișcare verticală,

• Offset de pornire: -1 (la 0%)
• Decalaj mediu: 0 (la 50%)
• Offset final: 1 (la 100%)

Sub fila Mișcare orizontală,

• Offset de pornire: -0,5 (la 0%)
• Decalaj mediu: 0 (la 50%)
• Offset final: 0,5 (la 100%)

Sub fila Scalare sus și jos,

• Scară inițială: 110% (la 0%)
• Scară medie: 125% (la 50%)
• Scara de încheiere: 140% (la 100%)

Rezultat

Puteți adăuga niște margini de sus și de jos la secțiune, astfel încât să puteți verifica rezultatul de până acum.

Crearea textului fals

În coloana din dreapta, adăugați un nou modul de text.

Actualizați conținutul corpului cu următoarele:

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

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

• Culoarea textului: deschis
• Rubrica 2 Font: Rubik
• Rubrica 2 Dimensiune text: 4vw
• Căptușeală (desktop): 16vw sus, 5vw stânga, 5vw dreapta
• Căptușeală (tabletă): 16vw sus, 16vw jos, 5vw stânga, 5vw dreapta

Rezultat

Opțiuni opționale

Fundal negru / text alb

Dacă doriți să utilizați un fundal negru pentru masca de text, tot ce trebuie să faceți este să actualizați cele trei opțiuni cheie care alcătuiesc efectul de mascare a textului.

Deschideți setările modulului text și modificați următoarele:

• Culoarea fundalului: # 000000 (negru)
• Culoarea textului textului: #ffffff (alb)
• Blend Mode: Multiplicare

Și iată rezultatul ...

Rotire imagine PNG

Și puteți schimba imaginea animată cu una care are un fundal transparent (un PNG) pentru un alt efect rece. Iată un exemplu de imagine PNG pe care am folosit-o cu un efect de scroll rotativ adăugat.

Rezultate finale

Iată o altă privire asupra tuturor modelelor.

Gânduri finale

Sperăm că aceste modele de mască text, cu animație de fundal pe scroll, vor oferi avantajul creativ de care site-ul dvs. a avut nevoie. Odată ce cunoașteți ingredientele de bază pentru crearea efectului de mascare a textului, nu veți avea nicio problemă în crearea nenumăratelor versiuni ale acestui design care să corespundă nevoilor dumneavoastră.

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

Noroc!