Doriți să proiectați un fundal Divi animat la derularea paginii datorită măștilor și modelelor? Acest tutorial este pentru tine...
Adăugarea unei animații de defilare la Divi iar măștile și modelele sale de fundal reprezintă un sfat util de design care poate da o nouă viață designurilor tale de fundal. site-ul web.
În acest tutorial, vă vom arăta cum să creați și să animați măști și modele de fundal folosind opțiunile de defilare ale Divi (nu este nevoie de cod personalizat).
Pentru a face acest lucru, vom crea un strat de fundal plutitor folosind o linie Divi pe care îl vom folosi pentru a anima măști și modele de fundal atunci când un utilizator defilează printr-o secțiune a cuprins.
Credem că vă va plăcea rezultatul.
Să începem!
studiu
Iată o ilustrare rapidă a cum va arăta animația de defilare de fundal pentru acest tutorial.
Conceptul
Conceptul acestui design nu ar trebui să fie prea greu de înțeles. Începem cu o secțiune care are un fundal gradient.
Apoi creăm o linie care este poziționată (absolută) astfel încât să acopere complet secțiunea (ca o suprapunere). Putem adăuga un model de fundal la rând.
Apoi putem adăuga o mască de fundal la coloană.
Apoi adaugam efecte de defilare la rând și coloană (cum ar fi scara și rotația) care vor anima modelul și masca separat în fundalul secțiunii.
Când ascundem debordarea secțiunii, tot ce vedem este animația conținută în secțiune.
Să începem prin a crea o pagină cu Divi Builder
Pentru a începe, va trebui să faceți următoarele:
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizare Divi Constructor
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Citiți și: Divi: Cum să utilizați „Gradient Builder” pentru a vă înfrumuseța imaginile
Cum se creează măști și modele de fundal animate cu derulare cu Divi
Design de fundal al secțiunii
În primul rând, vom omite crearea unei linii și vom trece direct la editarea secțiunii implicite existente în generatorul de teme.
Pentru ca designul nostru de fundal să umple browserul, trebuie să adăugăm o înălțime verticală secțiunii. O modalitate simplă de a face acest lucru este să adăugați o înălțime minimă secțiunii.
Deschideți setările secțiunii. Sub fila Amenajări, actualizați înălțimea minimă și îndepărtați căptușeala după cum urmează:
- Marja: 80 vh (sus și jos)
- Umplutură: 0px (sus și jos)
Proiectarea unui gradient de fundal pentru secțiune
Acum putem adăuga un gradient de fundal personalizat la secțiune.
Pentru a adăuga primele opriri de gradient, asigurați-vă că setările secțiunii sunt deschise sub filă Conţinut. Apoi selectați fila Gradient de fundal și faceți clic pentru a adăuga un nou gradient. Acest lucru va adăuga două culori de gradient implicite. Adăugați următoarele opriri de gradient cu culoarea și poziția după cum urmează:
- Opriri de gradient:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Apoi schimbați direcția gradientului liniar:
- Direcție gradient: 270 de grade
Adăugați rânduri la secțiune
Acum că secțiunea noastră este la locul său, adăugați un rând cu o singură coloană la secțiune. Această linie va fi folosită pentru masca de fundal și animația de defilare a modelului.
Apoi, duplicați linia pe care tocmai ați creat-o. Această a doua linie (duplicată) va fi folosită pentru noi cuprins asa cum ai face de obicei.
Acum ar trebui să aveți o linie de sus pentru animația de defilare de fundal și o linie pentru cuprins normale.
Personalizați linia
Acum că avem pregătit gradientul de fundal al secțiunii, ne putem îndrepta atenția către linia pe care o vom folosi pentru animația noastră de fundal pe defilare.
Deschideți setările liniei. Sub fila Avansat, actualizați următoarele:
- Poziție: absolută
Acest lucru va permite liniei să se suprapună secțiunii fără a ocupa spațiu real în document.
Acum tot ce trebuie să facem este să actualizăm înălțimea și lățimea, astfel încât să se întindă pe toată lățimea și înălțimea secțiunii. Acest lucru va crea suprapunerea de care avem nevoie și al doilea strat de design de fundal.
Sub filă Amenajări, actualizați opțiunile de dimensionare după cum urmează:
- Înălțimi coloane Aquasize: DA
- Latime: 100%
- Latime maxima: 100%
- Înălțime: 100%
- Umplutură: 0px (sus și jos)
Acum este posibil să nu puteți vedea linia, dar acum acoperă perfect fundalul întregii secțiuni.
Creați un model de fundal pentru linie
În acest exemplu vom adăuga modelul Confeti ca fundal de linie.
Deschideți setările liniei. Sub opțiune Context, selectați fila Model de fundal și actualizați următoarele:
- Model de fundal: confetti
- Model :
- Culoare: #f6bef7
- Dimensiune: Dimensiune personalizată
- Latime: 35 vw
- Repetare Origine: centru
NOTĂ : Utilizarea unității de lungime VW asigură că modelul se va scala cu browserul, păstrând designul consistent și receptiv.
Adăugați efecte de derulare la linie
Acum că modelul nostru de fundal este la locul lui, putem adăuga efecte de defilare la linie.
Accesați fila Avansat. Sub opțiune Efecte de derulare, actualizați următoarele:
Selectați fila Mișcare orizontală și actualizați următoarele:
- Activați mișcarea orizontală: DA
- Compensație de pornire: 0,5 (la 0%)
- Offset mediu: 0 (de la 40% la 60%)
- Offset final: -0,5 (la 100%)
Acest lucru va muta modelul de fundal al liniilor începând cu 50 de pixeli la stânga și terminând cu 50 de pixeli la dreapta.
Selectați fila „Scale Up and Down” și actualizați următoarele:
- Activați scalarea în sus și în jos: DA
- Scala de pornire: 150% (la 0%)
- Scala medie: 100% (de la 40% la 60%)
- Scala finală: 150% (la 100%)
Acest lucru va scala modelul de fundal al rândului atunci când derulați.
Selectați fila « Rotirea » și actualizați următoarele:
- Activați rotația: DA
- Rotație de pornire: 10 grade (la 0%)
- Rotație medie: 0 grade (de la 40% la 60%)
- Rotație finală: -10 grade (la 100%)
SFAT CHEIE: Trebuie să mențineți rotația la minimum sau riscați să arătați goluri acolo unde linia nu se extinde dincolo de secțiune. O regulă generală bună este să măriți scara dacă doriți să creșteți rotația. Acest lucru va permite liniei să pivoteze peste secțiune fără a expune marginile.
Adăugați mască de fundal cu efecte de defilare în coloană
Odată ce rândul nostru este complet, suntem gata să adăugăm o mască de fundal cu efecte de defilare în coloana aceluiași rând. Pentru a începe, să adăugăm o mască de fundal.
Pentru a face acest lucru, deschideți setarea coloanei. Sub fila Mască de fundal, actualizați următoarele:
- Mască: Strat Blob
- Culoare: #ffffff
- Transformarea măștii: Flip orizontal, inversare
Adăugați efecte de defilare la coloană
Acum că masca noastră de fundal este la locul său, putem adăuga efecte de defilare în coloană. Rețineți că coloana are deja efecte de defilare moștenite de la rândul părinte.
Tot ce vom face este să rotim coloana în direcția opusă rândului pentru a obține mai multă separare a măștii și a modelului pe durata derulării.
Accesați fila Avansat. Sub opțiuni Efecte de derulare, selectați fila Rotating și actualizați următoarele:
- Activați rotația: DA
- Rotație de pornire: -15 grade (la 0%)
- Rotație medie: 0 grade (de la 40% la 60%)
- Rotație finală: 15 grade (la 100%)
Ascunde depășirea secțiunii
În prezent, linia rămâne vizibilă ori de câte ori derularea face ca aceasta să se extindă dincolo de secțiune.
Pentru a curăța acest lucru, trebuie să ascundem debordarea secțiunii. Pentru a face acest lucru, deschideți setările secțiunii. Sub fila Avansat, actualizați opțiunile de vizibilitate după cum urmează:
- Overflow orizontal: Ascuns
- Overflow vertical: Ascuns
Acum arata mai bine.
Adăugarea de conținut la linia creată în acest scop
În acest moment, masca de fundal și animația de defilare a modelului sunt complete. Tot ce trebuie să facem este să adăugăm conținutul pe care îl dorim la linia pe care am creat-o mai devreme pentru conținut.
Pentru acest exemplu, am adăugat un titlu inactiv, astfel încât să putem vedea cum va arăta animația de fundal cu text static.
Rezultat final
Să aruncăm o privire la rezultatul final al designului nostru.
Descărcați DIVI acum!!!
Concluzie
Este uimitor cât de ușor este să creezi fundaluri atât de frumoase cu opțiunile de fundal ale Divi. În plus, adăugarea de animație cu efectele de defilare ale Divi aduce o viață nouă acestor design-uri.
Pentru un aspect diferit, puteți încerca măști și modele diferite pe fiecare strat. Dacă doriți mai multă inspirație despre cum să utilizați măști și modele fundal, verificați acestea 12 combinații de mască de fundal și modele
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
