Ghid final pentru utilizarea Parallax cu Divi

Încercarea de a găsi imaginea cu dimensiunea potrivită pentru paralaxă poate fi puțin frustrantă. Imaginea poate arăta grozav ca o imagine de fundal standard, dar, de îndată ce selectați „Utilizați efectul Parallax”, imaginea devine explozivă și nimic nu pare corect. Pentru a evita această agravare în viitor, trebuie să înțelegeți ce este paralaxa și ce se întâmplă cu imaginea atunci când aceasta este pusă în modul de paralaxă.

Astăzi, o să mă scufund adânc în modul în care funcționează paralaxa cu Divi. Voi explica exact ce se întâmplă atunci când utilizați cele două metode diferite de paralaxă, ce dimensiune este cea mai bună imagine și chiar voi arunca câteva hacks CSS personalizate pentru a vă poziționa imaginile exact cum doriți.

Haide să mergem.

Ce este Parallax?

În ceea ce privește designul web, paralela este un termen folosit pentru a descrie un efect care dă percepția distanței și mișcării asemănătoare vieții folosind un fel de animație bidimensională. Acest lucru se realizează prin modificarea vitezei de derulare a diferitelor elemente de pe o pagină web pentru a crea iluzia distanței în timp ce vizualizați un punct fix. Tehnica există de ceva timp în alte locuri decât pe web. Îți amintești de Super Mario Brothers? Dacă ați jucat vreodată jocuri video în anii 80 (Nintendo NES), majoritatea jocurilor au folosit această tehnică pentru a da impresia de mișcare folosind doar imagini 2d. Elementele din frunte s-au mișcat mai repede decât copacii / munții / norii din fundal. Creând astfel o mișcare mai asemănătoare vieții.

Acest efect seamănă mult cu metoda True Parallax din Divi. Cu excepția mișcării este verticală în loc de orizontală.

Înțelegerea modului în care funcționează Parallax cu Divi

Cu Divi, Parallax este foarte ușor de implementat pe orice imagine de fundal din orice secțiune, rând, coloană sau modul. Tot ce trebuie să faceți este să setați opțiunea Efect Parallax la „DA” și apoi să selectați metoda Parallax (CSS sau True Parallax).

Metoda CSS

Metoda CSS este una dintre cele două metode pe care le puteți alege pentru efectul de paralaxă. Probabil puteți ghici ce se întâmplă doar testând această metodă pe site-ul dvs. Este denumită Metoda CSS, deoarece folosește CSS doar pentru a crea efectul. Această metodă folosește CSS pentru a fixa imaginea de fundal în loc, în timp ce celelalte elemente de pe pagină derulează normal. Acest lucru dă impresia că conținutul se mișcă în fața imaginii de fundal.

Adevărata metodă de paralizie

A doua metodă se numește True Parallax. Se numește „Adevărat” probabil pentru că exemplifică ideea convențională a efectului de paralaxă. Această metodă folosește CSS și JavaScript pentru a crea o mișcare de derulare ușor mai lentă decât celelalte elemente de pe pagină. Aceasta este o reprezentare mai asemănătoare vieții a mișcării datorită percepției distanței pe care o creează între imaginea cu mișcare lentă din fundal și elementele cu mișcare mai rapidă din prim-plan.

Ce se întâmplă când Parallax este activat în Divi?

Acest lucru poate fi frustrant dacă nu înțelegeți ce se întâmplă în culise. Prin urmare, este util să știm exact ce se întâmplă cu imaginea atunci când este activată paralaxa.

Ce se întâmplă când este selectată metoda CSS?

Când este selectat CSS Parallax, imaginea este înfășurată într-o nouă divizare cu o poziție absolută care acoperă dimensiunea completă a ferestrei browserului. Iată clasele CSS și fragmentele de cod care fac acest lucru în Divi:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

Deoarece dimensiunea fundalului este setată să „acopere” cu o înălțime și o lățime de 100%, imaginea va „acoperi” întotdeauna fiecare parte a containerului său. În acest caz, containerul este fereastra browserului. Aceasta înseamnă că părți ale imaginii vor deveni ascunse în spatele altor secțiuni de conținut, deoarece imaginea de fundal va continua să se extindă și să se contracte odată cu dimensiunea ferestrei browserului.

Imaginați-vă că aceasta este o imagine de fundal obișnuită adăugată la un modul de antet din partea de sus a unei pagini.

Raportul de aspect al imaginii este corect (1920 × 1080), iar dimensiunea imaginii acoperă și se potrivește frumos în secțiune fără suprapunere atunci când este vizualizată pe un ecran de 1366 × 766. Zona albă de sub imagine reprezintă restul conținutului de pe pagină.

Acum, asta se întâmplă când selectați paralaxă pentru imaginea dvs.

După cum puteți vedea, imaginea se extinde atât pe verticală (pentru a ajunge în partea de jos a ferestrei browserului), cât și pe orizontală (pentru a păstra raportul de aspect al imaginii). Pătratul negru reprezintă monitorul dvs., astfel încât tot ce se află în interiorul pătratului negru este ceea ce vede spectatorul. Am făcut secțiunea de conținut alb în partea de jos semi-transparentă, astfel încât să puteți vedea unde se află imaginea de fundal ascunsă în spatele ei. Acolo imaginea rămâne fixă ​​în timp ce derulați și alte elemente se deplasează în sus și în jos în fața imaginii.

Ce se întâmplă atunci când este selectată metoda True Parallax?

Dacă aveți setul True Parallax, imaginea este înfășurată într-un nou div cu aceeași clasă CSS:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Cu toate acestea, prin utilizarea unui mic JavaScript, înălțimea și poziția imaginii sunt setate dinamic în funcție de dimensiunea ferestrei browserului și atunci când derulați pagina în jos. Cele două valori care sunt adăugate dinamic la imaginea de fundal sunt valoarea px pentru proprietatea înălțime și valoarea de traducere pentru proprietatea de transformare. Valoarea proprietății înălțime determină înălțimea imaginii, în timp ce valoarea de traducere a proprietății de transformare determină poziționarea exactă a imaginii pe pagină în conformitate cu axele x și y.

Iată codul care se introduce în eticheta de imagine a imaginii de fundal paralaxă, cu fereastra browserului meu 1366 × 766:

    height: 960.8px;
    transform: translate(0px, 220.5px);

Observați cele două numere din proprietatea de transformare. Aceste două numere controlează poziționarea imaginii de fundal. Primul număr (0px) poziționează imaginea de-a lungul axei x (orizontal). Deoarece este setat la 0 px, imaginea nu va fi mutată. Al doilea număr poziționează imaginea de-a lungul axei y (vertical). Întrucât are în prezent 220,5 px, asta înseamnă că imaginea este împinsă în jos pe pagina 220,5 px.

De asemenea, observați că valoarea înălțimii (960,8 px) este mai mare decât înălțimea ferestrei browserului meu (766 px) cu aproximativ 200 px. Aceasta este pentru a se potrivi imaginii care este împinsă la 220,5 pixeli peste partea de jos a ferestrei browserului.

Când este selectată metoda True Parallax, este posibil să fi observat că imaginea dvs. este aruncată în aer chiar mai mult decât metoda CSS. Acest lucru se datorează faptului că poziția imaginii este întinsă cu încă 30% din înălțimea browserului.

Vă amintiți ilustrația noastră obișnuită de fundal?

Iată ce se întâmplă cu imaginea după selectarea True Parallax (înainte de a începe derularea, desigur):

După cum puteți vedea, imaginea este trasă puțin mai mult de partea de jos a ferestrei browserului. Această fereastră a browserului are aproximativ 1080 × 700, deci este destul de mică, dar am vrut să vă arăt ce se întâmplă pe o fereastră de desktop mai mică.

De ce True Parallax întinde imaginea până acum?

Ei bine, cel mai bine presupun că este să mă acomodez cu dimensiuni mai mari ale ecranului. Odată ce fereastra browserului atinge dimensiunea ecranului 1920 × 1080, imaginea de fundal nu se mai extinde dincolo de partea inferioară a ferestrei și se potrivește frumos.

De ce True Parallax folosește JavaScript?

Principalul motiv pentru care True Parallax necesită JavaScript este că imaginea de fundal trebuie să se deplaseze cu o viteză diferită de celelalte elemente atunci când derulați. Îți amintești de Mario Brothers?

Cu True Parallax, dacă măresc dimensiunea browserului, valoarea înălțimii crește și prin JavaScript, asigurându-mă că imaginea mea este întotdeauna suficient de mare pentru browser.

Dacă derulez pagina în jos, valoarea poziției de traducere (220,5 px în exemplul de mai sus) crește, deplasând poziția verticală (axa y) a imaginii în josul paginii.

Dacă derulez în sus, valoarea poziției de traducere scade, atrăgând imaginea înapoi pe pagină. Dar, deoarece imaginea este împinsă în jos și trasă în sus cu o viteză diferită față de celelalte elemente atunci când derulați, obțineți efectul de paralaxă adevărată.

Ce fel de imagine ar trebui să folosesc?

Dacă doriți să utilizați efectul de paralaxă pe site-ul dvs., alegerea imaginii de fundal potrivite este crucială. Nu doriți ca fundalul să fie prea aglomerat sau distractiv. Dar, pe de altă parte, nici nu doriți să fie o notă plictisitoare.

Iată 5 sfaturi generale pentru alegerea tipului potrivit de imagine pentru Parallax

1. Evitați distragerea fotografiilor. Imaginile care se întâmplă prea mult creează confuzie și distrag atenția de la conținut.
2. Asigurați-vă că fotografia dvs. se potrivește cu tema site-ului dvs. Site-ul dvs. ar trebui să spună o poveste. Această imagine de paralaxă (ca și restul imaginilor) ar trebui să se potrivească cu tema.
3. Păstrați-l mare și simplu. Amintiți-vă, imaginea dvs. de paralaxă va fi vizualizată și pe dimensiuni de ecran mai mici. Asigurați-vă că detaliile fotografiei nu sunt atât de mici încât nu pot fi recunoscute pe dispozitive mai mici.
4. Adăugați o culoare de suprapunere atunci când este necesar. Uneori, o imagine de paralaxă bună va avea atât aspecte întunecate, cât și luminoase, care pot ajunge să ascundă textul atunci când derulați. Adăugarea unei suprapuneri întunecate sau deschise va garanta că textul dvs. poate fi citit oriunde pe imagine
   
5. Faceți-l interesant. Există modalități de a face fotografii pentru a vă mulțumi cu ceva plictisitor. Faceți-vă timp pentru a găsi unul care să atragă publicul și să le atragă atenția.

Ce dimensiune trebuie să utilizați imaginea de fundal paralelă?

Acesta este puțin dificil de răspuns. Nu există imagini de paralaxă pentru toate dimensiunile. De fapt, nu există nicio dimensiune care să se potrivească tuturor în designul web, cel puțin nu de când a apărut un design receptiv. Dar, deși este posibil să nu vă pot oferi o regulă fermă, vă pot oferi câteva îndrumări generale pentru alegerea imaginilor de fundal de paralaxă cu dimensiunea potrivită cu Divi.

Deoarece cea mai populară dimensiune a ecranului este de aproximativ 1366 × 766, cu siguranță m-aș asigura că toate imaginile de paralaxă de fundal au cel puțin această dimensiune. Dar, datorită popularității monitoarelor mai mari, aș merge cu o dimensiune mai mare, cum ar fi 1920 × 1080. Astfel, utilizatorii vor vedea o imagine de înaltă calitate pe desktopurile mai mari.

Problema cu a avea o imagine cu dimensiunile 1920 × 1080 este că rareori veți avea vreodată o secțiune vizibilă care are 1080px în înălțime. Așa că poți să te bazezi pe partea de jos a acestor imagini rămânând ascunse.

Sfaturi utile pentru ca imaginea de fundal Parallax să arate corect

Pentru anteturi și secțiuni de top

Cel mai simplu mod de a vă asigura că imaginea dvs. este complet vizibilă și arată excelent este să utilizați modulul antet Fullwidth. În acest fel, imaginea de fundal va arăta întotdeauna excelent, indiferent de dimensiunea ecranului. Dar, dacă utilizați o imagine de fundal de paralaxă utilizând modulul antet Fullwidth, poate fi necesar să adăugați niște umplutură în partea de sus și de jos a modulului pentru a afișa mai mult din imagine. Puteți face acest lucru utilizând Visual Builder. Accesați Setările modulului antet. Sub fila Advanced, introduceți următoarele în caseta de text Element principal:

Padding: 250px 0 250px;

Asta ar trebui să te ducă în direcția corectă.

Dacă încă nu aveți suficientă imagine afișată, v-aș sugera să decupați partea de sus a imaginii și apoi să o încărcați din nou. Acest lucru vă poate ajuta.

De asemenea, încercați să selectați fotografii care au conținut nesemnificativ în partea de jos a imaginii și conținutul mai important în partea de sus. Pentru anteturi, ar trebui să vă așteptați doar să vedeți primele 700 px ale imaginii de paralaxă.

Pentru secțiuni regulate / medii

Asigurați-vă că lăsați suficient spațiu în jurul conținutului pentru a expune fundalul suficient, astfel încât să puteți obține o imagine completă atunci când secțiunea ajunge în punctul central al utilizatorului. Folosiți căptușeala în avantajul dvs. Dacă aveți de gând să utilizați paralaxă, nu lăsați utilizatorii să se confunde și trebuie să derulați în sus și în jos doar pentru a vedea care este imaginea. Mai bine să le arăți prima dată.

Pentru secțiunile inferioare / subsolurile

Dacă utilizați metoda CSS, vă puteți aștepta să vedeți mai mult din partea de jos a imaginii de fundal (în funcție de cât spațiu aveți). Aș încerca să decupez partea de jos a fotografiei pentru a arăta mai mult din partea de sus în aceste secțiuni.

Dacă utilizați metoda True Parallax, veți vedea în cea mai mare parte partea de sus a imaginilor dvs., așa că le-aș trata ca pe anteturile dvs.

Iată un exemplu de imagini de fundal True Parallax în partea de sus, de mijloc și de jos a paginii.

Acest tip de imagine a unui pod funcționează bine, deoarece are un punct focal frumos în lateral și partea inferioară a imaginii nu este la fel de semnificativă ca partea de sus, astfel încât mesajul nu se pierde niciodată pentru utilizator.

Aici este aceeași pagină folosind metoda CSS. Puteți vedea cu adevărat faptul că imaginea de fundal este fixă ​​și se extinde la fereastra browserului. Se pare chiar că este aceeași imagine fixată în fundal tot timpul.

Dacă tot nu sunteți mulțumit după ce ați căutat imaginea perfectă, ați adăugat umplutura necesară și ați decupat-o, puteți recurge oricând la unele hack-uri.

Parallax Image Hacks: Schimbarea poziției imaginii cu CSS personalizat

Dacă doriți să schimbați poziția fundalului de paralaxă, puteți utiliza selectorul css „.et_parallax_bg”. Iată css-ul implicit care poziționează imaginea pentru efectul de paralaxă.

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Dacă observați, în mod implicit, proprietatea poziției de fundal pentru metoda css parallax este după cum urmează, este setată la „centru de sus”. Dar dacă doream să schimb poziția inițială a imaginii de fundal, puteți regla valorile proprietății poziției de fundal.

Dacă doriți să vă păstrați CSS-ul personalizat condensat la o anumită imagine și să nu-l efectueze pe tot fundalul de paralaxă, va trebui să adăugați o clasă la secțiunea dvs., astfel încât să putem identifica în CSS ce fundal trebuie să personalizăm.

Accesați setările secțiunii, sub fila Avans și introduceți o clasă CSS numită „parahacks”.
Acum accesați Setări pagină și selectați fila Avansat.

Apoi utilizați caseta CSS personalizată pentru a introduce oricare dintre următoarele exemple de CSS personalizat:

Dacă utilizați metoda CSS, puteți face imaginea de fundal centrată vertical adăugând următorul css personalizat:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

Pentru a face imaginea de fundal aliniată în partea de jos, adăugați următorul css personalizat:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

Pentru a face imaginea de fundal să se deplaseze în sus cu un anumit număr de pixeli, adăugați următorul css personalizat:

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

Dacă utilizați metoda True Parallax, trebuie să țineți cont de 220px (mai mult sau mai puțin în funcție de înălțimea browserului) a imaginii ascunse în partea de jos. Pentru a face imaginea de fundal mai centrată pe verticală, trebuie să ajustați proprietatea poziției de fundal utilizând o valoare de pixel negativă, astfel:

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

Pentru a face imaginea de fundal mai aliniată în partea de jos, adăugați următorul css personalizat:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL; DR? Iată un rezumat video al principalelor puncte

Abonați-vă la canalul nostru Youtube

În încheiere

Sper din toată inima că acest ghid a fost util pentru a obține o înțelegere profundă a modului în care funcționează paralaxa cu Divi. Din fericire, Divi face aproape toate greutățile ridicate oferindu-ne funcționalitatea de paralaxă. Metoda CSS și metoda True Parallax creează ambele efecte extraordinare de la început. Cu toate acestea, depinde de noi să găsim imaginile potrivite și să le modificăm corect pentru a le face să funcționeze pentru site-ul nostru. Du-te! Pun pariu că vei crea ceva uimitor.

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

Noroc!