Cum se combină efectele Hover cu fundaluri CSS Parallax în Divi

Folosirea CSS Parallax cu imagini de fundal în Divi ne permite să creăm efecte de plutire care sunt surprinzător de unice. Parallax este una dintre multele modalități prin care putem adăuga viață site-urilor noastre web. Și atunci când combinăm paralaxă cu gama largă de opțiuni de plimbare ale lui Divi, dăm conținut la viață și mai mult.

În acest tutorial, vă vom arăta că puteți proiecta rapid și ușor efecte de planare a fundalului de paralaxă CSS unice în Divi. Nu este nevoie de plugin sau codificare personalizată!

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra efectelor de plutire a fundalului css parallax pe care le vom proiecta î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 î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ă aveți următoarele:

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
3. Imagini care urmează să fie utilizate pentru conținut fals

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Partea 1: Crearea unui efect de deplasare în paralel Breakout în Divi

Mai întâi, creați o secțiune obișnuită cu un rând de o coloană.

Înainte de a adăuga un modul, deschideți setările secțiunii și adăugați o imagine de fundal utilizând paralela CSS.

Asigurați-vă că imaginea are o lățime de cel puțin 1920 px. Designul funcționează bine cu o imagine de fundal mai închisă, cu multă textură. Folosesc unul din pachetul nostru de machete de cafenea, disponibil de la Divi Builder.

Apoi adăugați niște umplutură la secțiune după cum urmează:

Garnitura: 10vw sus, 10vw jos

Adăugați un modul Blurb

Odată ce fundalul secțiunii și căptușeala sunt la locul lor, adăugați un modul blurb la rând.

Apoi actualizați conținutul blurb cu câteva propoziții de text corporal. Puteți păstra acolo titlul implicit.

Apoi faceți clic pentru a utiliza o pictogramă și selectați pictograma cafea pentru blurb.

După ce conținutul este gata, actualizați setările de proiectare după cum urmează:

Culoare pictogramă: #ffffff
Pictogramă Dimensiune font: 50 px
Alinierea textului: centru
Titlu Font: Oswald
Titlu Font Style TT
Culoarea textului titlului: #ffffff
Spațierea literelor de titlu: 2 px
Font corp: Nunito
Culoarea textului corpului: #ffffff
Spațierea literelor corporale: 1 px
Căptușeală: 30 px sus, 30 px jos, 30 px stânga, 30 px dreapta

Reglați lățimea rândului

După ce blurb-ul este proiectat, săriți peste setările rândului și reglați lățimea maximă.

Lățime maximă: 80%

Setări coloană

Pentru acest exemplu, vom activa efectul hover la nivelul coloanei. Acest lucru vă permite să utilizați mai multe module pentru a construi conținutul, chiar dacă pentru moment folosim doar un singur modul blurb.

Pentru ca acest efect de paralelare să funcționeze, trebuie să adăugăm aceeași imagine de fundal la coloana pe care am folosit-o în secțiunea noastră. De asemenea, va trebui să folosim aceeași metodă de paralaxă CSS și pe imaginea de fundal a coloanei.

Deschideți setările coloanei și adăugați aceeași imagine de fundal utilizând paralela CSS.

Nu veți putea vedea nicio diferență între imaginea de fundal a coloanei și imaginea de fundal a secțiunii, deoarece ambele folosesc paralaxă CSS, care, în esență, fixează imaginea în același loc exact de pe pagina web. Cu toate acestea, veți vedea diferența odată ce efectul de hover este la locul său.

Continuați să actualizați setările de proiectare a coloanei după cum urmează:

Garnitura: 4vw sus, 4vw jos
Colțuri rotunjite: 10 px

Apoi, dați coloanei o umbră de casetă care se afișează numai în cursă după cum urmează:

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 0px
Puterea neclarității umbrei cutiei: 36 px
Culoare umbră (implicit): rgba (0,0,0,0)
Culoare umbră (hover): rgba (0,0,0,0.72)

Acum, să mergem la opțiunile de transformare și să actualizăm următoarele stiluri de transformare pe hover:

Scala de transformare (plimbare): 105%

Aceasta va mări ușor coloana (și conținutul) pentru a crea efectul de a ieși ușor din imaginea de fundal.

Transformă axa Y tradusă (plasați cu mouse-ul): -2,5%

Aceasta mișcă ușor coloana în sus pentru a crea o ușoară deplasare asimetrică.

Transformarea originii: 100% 50% (centru jos)

Aceasta începe efectul de scalare de la originea centrală de jos, care, atunci când este combinat cu valoarea de traducere, seamănă cu un efect subtil de articulație.

Iată efectul de plutire css de paralaxă de până acum.

Acum deschideți setările rândului și duplicați coloana de două ori pentru a crea un total de trei coloane fiecare cu aceleași efecte blurb și hover.

Rezultat final

Iată designul final. Observați cum imaginile de fundal de paralaxă sunt ascunse în mod implicit atunci când derulați pagina în jos. Apoi, ele apar atunci când treceți peste fiecare coloană pe măsură ce apar. Puteți vedea, de asemenea, funcțiile paralele pe coloană atunci când derulați pagina în timp ce treceți peste coloană. Este un efect subtil dar totuși extrem de unic.

Adăugarea rotației la efectul Hover

De asemenea, putem adăuga o rotație la efectul de css paralax hover care adaugă o notă plăcută designului. Pur și simplu deschideți fiecare dintre setările coloanei și actualizați următoarele:

Transformare Rotire Axa Z (în curs): 5 grade

Dacă doriți să o amestecați, puteți da coloanei din mijloc o rotație de -5 grade.

Iată rezultatul final.

Și aici este același design cu o imagine de fundal mai deschisă și un text mai întunecat.

Partea a 2-a: Crearea unui efect de plutire în paralel pentru lupă în Divi

Duplicați secțiunea din primul design și apoi deschideți setările secțiunii și înlocuiți imaginea de fundal cu una nouă. O folosesc pe cea din pachetul nostru de aspect pentru jocuri video, deoarece evidențiază cu adevărat efectul de mărire a paralaxei.

Actualizați setările rândului

Vom avea nevoie de spațiu suplimentar pentru acest design, așa că deschideți setările rândului și actualizați următoarele:

Lățimea jgheabului: 1
Lățime: 100%
Lățime maximă: 98%

După aceea, săriți peste fila de conținut și ștergeți două dintre coloane, astfel încât să rămână doar una.

Setări coloană

Pentru acest design, trebuie să aplicăm efectul hover la nivelul modulului în loc de nivelul coloanei, deci trebuie să resetați stilurile implicite pentru coloană. Pentru a face acest lucru, faceți clic dreapta pe elementul coloanei și selectați „resetare stiluri element”.

Actualizați modulul Blurb

După ce setările coloanei sunt restabilite la stilurile implicite, deschideți setările modulului blurb și adăugați aceeași imagine de fundal css parallax care a fost adăugată la secțiune.

Dimensionare

Pentru a crea un modul circular, mai întâi trebuie să-i dăm lățimea și înălțimea potrivite după cum urmează:

Lățime: 300 px
Alinierea modulului: centru
Înălțime: 300 px

Frontieră

Pentru a finaliza efectul circular, trebuie să actualizăm colțurile rotunjite și să îi oferim o ușoară margine.

Colțuri rotunjite: 50%
Lățimea chenarului: 1 px
Culoare margine: rgba (255.255.255,0.12)

Efect cutie cu umbră

Apoi, dați blurbului o umbră de cutie pe hover, după cum urmează:

Box Shadow: vezi captura de ecran
Puterea neclarității umbrei cutiei: 36 px
Culoare umbră (implicit): rgba (0,0,0,0)
Culoare umbră (hover): rgba (0,0,0,0,7)

Efecte Hover Transform

După ce umbra casetei este la locul său, actualizați opțiunile de transformare după cum urmează:

Transformare origine (implicit): 50% 0% (centru stânga)

Acest lucru vă va asigura că textul nu se va extinde în afara paginii odată ce este plasat în partea stângă a rândului cu trei coloane.

Scala de transformare (plimbare): 130%

Acest lucru va mări blurb-ul și va mări cu adevărat imaginea de fundal de paralaxă pentru un efect de plutire rece.

Duplicați coloana

Odată ce blurb-ul este terminat, putem duplica coloana pentru a crea trei coloane, fiecare cu același modul de blurb.

Deschideți setările rândului și duplicați coloana de două ori pentru un total de trei coloane.

Actualizați Transform Origin

Deoarece modulele noastre de blurburi au toate originea transformării setată la „centru stânga”, trebuie să ajustăm acest lucru pentru blurburile din coloana centrală și dreaptă, astfel încât să se scaleze din poziția corespunzătoare.

Deschideți setările pentru modulul blurb din coloana 2 și actualizați următoarele:

Transformarea originii: 50% 50% (centru centru)

Apoi deschideți setările pentru modulul blurb din coloana 3 și actualizați următoarele:

Transformarea originii: 50% 100% (centru dreapta)

Rezultat final

Acum verificați rezultatul final. Observați modul în care efectul mărește cu adevărat imaginea de fundal de paralaxă CSS din spatele blurbului. Și atunci când derulați în jos în timp ce plasați cursorul, acesta seamănă cu efectul unei lupe.

De fapt, acest lucru este atât de cool încât am putea dori să îl lăsăm ca stil implicit în loc să fie doar în starea de plutire.

Gânduri finale

Sper că exemplele din această postare au făcut ca sucurile tale creative să curgă puțin, astfel încât să poți explora modele și efecte mai frumoase pentru a le combina cu parallax CSS. Procesul de configurare este foarte simplu, dar posibilitățile sunt aparent nesfârșite.

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

Noroc!