Cum să animați imaginile de fundal paralaxice cu efectele de defilare ale lui Divi

Combinarea efectelor de defilare cu imagini de fundal de paralaxă poate crea un design destul de magic pentru vizitatorii dvs. Deoarece efectul de paralaxă pune deja imaginea în mișcare pe măsură ce utilizatorul derulează pagina în jos, adăugarea de efecte de derulare suplimentare (cum ar fi mișcarea orizontală și rotația) poate diferenția cu adevărat designul și deschide ușile pentru aspectele mai creative.

În acest tutorial, vom parcurge modul de animare a imaginilor de fundal de paralaxă folosind efectele de scroll ale lui Divi. Vom folosi aceeași imagine de fundal pe mai multe module de text pentru a proiecta un aspect unic pentru afișarea unui bloc scurt de text.

Să începem.

Trage cu ochiul

Descărcați gratuit imaginea de fundal animată cu paralelă

Pentru a pune mâna pe aspect 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.

Crearea imaginilor de fundal Parallax animate cu efectele de defilare ale lui Divi

Adăugarea coloanei

Pentru a începe, creați un rând cu o coloană.

Crearea modulului de text

Apoi adăugați un modul text în coloană.

Conținut text

Adăugați litera „p” la conținutul corpului.

Adăugați o imagine de fundal Parallax la modulul Text

Apoi, adăugați o imagine de fundal de paralaxă la modulul text, după cum urmează:

• Imagine de fundal: inserați imaginea
• Utilizați Efect Parallax: DA
• Metoda Parallax: CSS

Proiectarea textului

Sub fila Proiectare, actualizați următoarele:

• Font text: Montserrat
• Stil de text text: TT
• Culoarea textului textului: #ffffff
• Dimensiune text text: 100 px (desktop), 70 px (telefon)
• Spațiere scrisoare text: 5 px (telefon)
• Înălțimea liniei de text: 1em
• Alinierea textului: centru
• Căptușeală: 250 px sus, 250 px jos

Umplutura este cea care creează înălțimea necesară pentru a expune imaginea de fundal de paralaxă.

Setări rând

Acum că modulul nostru de text este terminat, deschideți setările rândului și actualizați următoarele:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime: 100%

Setări coloana 1

Apoi faceți clic pentru a deschide setările coloanei.

Sub fila Avansat, actualizați următoarele efecte de derulare:

Sub fila Efecte mișcare orizontală ...

• Activați orizontal: DA
• Offset de pornire: -2 (la 0% vizualizare)
• Decalaj mediu: 0 (la 40% -60%)
• Offset final: -2 (la 100%)

Sub fila Efecte rotative ...

• Activați rotirea: DA
• Rotație de pornire: 20 grade (la 0% vizualizare)
• Rotație medie: 0 grade (la 40% -60%)
• Rotație finală: -20 grade (la 100%)

Crearea coloanei 2

Chiar dacă am început cu un aspect cu o coloană, vom crea în total 5 coloane. Este mai ușor să duplicați coloana cu tot conținutul și setările sale pentru a crea următoarele patru necesare pentru proiectare.

Duplicați întreaga primă coloană (cu modulul text) pentru a crea a doua coloană.

Actualizarea efectelor de derulare a coloanei 2

Apoi actualizați efectele de derulare pentru coloana 2 după cum urmează:

Sub fila Efecte rotative ...

• Rotație de pornire: -20 grade
• Rotație finală: 20 grade

Crearea coloanei 3

Pentru a crea coloana 3, copiați coloana 2.

Actualizarea efectelor de derulare a coloanei 3

Apoi actualizați setările coloanei 3 după cum urmează:

Sub fila Efecte mișcare orizontală ...

• Activați mișcarea orizontală: NU

Sub fila Efect rotativ ...

• Rotație de pornire: 20 grade
• Rotație finală: 10 grade

Crearea coloanei 4

Pentru a crea coloana 4, copiați coloana 2 și apoi trageți-o în partea de jos.

Actualizarea efectelor de derulare a coloanei 4

Apoi deschideți setările pentru coloana 4 și actualizați următoarele:

Sub fila Efecte mișcare orizontală ...

• Offset de pornire: 2
• Offset final: 2

Sub fila Efecte rotative ...

• Rotație de pornire: -15 grade
• Rotație finală: 20 grade

Crearea coloanei 5

În cele din urmă, pentru a crea coloana 5, copiați coloana 4.

Actualizarea coloanei 5 Efecte derulare

Apoi actualizați setările coloanei 5 după cum urmează:

Sub fila Efecte rotative ...

• Rotație de pornire: 15 grade
• Rotație finală: -15 grade

Actualizarea literelor modulului text

Apoi, utilizați opțiunea de text în linie pentru a schimba literele din fiecare coloană, astfel încât să scrie în mod colectiv cuvântul „putere”.

Actualizarea designului modulului de text de mijloc

Deschideți setările modulului text în coloana 3 și actualizați următoarele:

• Font text: Montserrat Subrayada
• Culoarea textului textului: # e0e722
• Dimensiune text text: 150 px (desktop)
• Înălțimea liniei de text: 100 px

Actualizați conținutul primului modul de text pentru mobil

Pentru a afișa un singur modul de text pe mobil, trebuie să actualizăm modulul de text din coloana 1 cu următorul conținut pe tabletă și telefon:

Conținutul corpului pe tabletă și telefon:

<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

Actualizați setările coloanei 1

Apoi, deschideți setările pentru coloana 1 și actualizați următoarele:

• Colțuri rotunjite (desktop): 100% stânga sus
• Colțuri rotunjite (tabletă și telefon): 40% în stânga sus, 40% în dreapta jos

Sub fila avansată, adăugați următorul CSS personalizat pe afișajul tabletei elementului principal:

width: 100% !important;

Acest lucru vă va asigura că coloana se întinde pe toată lățimea rândului pe afișajul tabletei și al telefonului.

Ascundeți restul coloanelor de pe ecranul de pe tabletă și telefon

Acum că coloana 1 va acoperi întreaga lățime a rândului de pe tabletă și telefon, putem ascunde / dezactiva restul coloanelor de pe tabletă și telefon. Pentru aceasta, deschideți setările pentru coloanele 2-5 și dezactivați vizibilitatea fiecărei coloane de pe telefon și tabletă.

Actualizați setările coloanei 5

Apoi deschideți setările coloanei 5 și adăugați un colț rotunjit complementar după cum urmează:

• Colțuri rotunjite (desktop): 100% dreapta jos

Adăugarea proiectului de fundal la secțiune

Pentru a finaliza designul, actualizați setările secțiunii cu un design de fundal, după cum urmează:

• Culoare fundal: # e0e722

• Stilul divizorului de sus: vedeți captura de ecran
• Culoarea separatorului superior: # 222222
• Înălțimea divizorului superior: 650 px (desktop), 500 px (tabletă și telefon)

• Stilul împărțitorului inferior: consultați captura de ecran
• Culoare divizor inferior: # 222222
• Înălțimea divizorului inferior: 500 px (desktop), 400 px (tabletă și telefon)

Rezultat final

Hre este designul final pe desktop.

Și iată designul alternativ pe ecranul tabletei și al telefonului.

Gânduri finale

Imaginile de fundal de paralaxă se combină cu efectele de derulare în moduri cu adevărat magice. Singurul dezavantaj al utilizării imaginilor de fundal de paralaxă este lipsa de suport pentru dispozitive mobile, dar cu setările de reacție oferite de Divi, putem crea cu ușurință o rezervă. Sper că acest design elegant va adăuga puțină inspirație zilei tale.

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

Noroc!