Doriți să adăugați un efect de înclinare cu Divi pe vreun element al paginii tale?
Adăugarea de efecte de înclinare a hoverului la dvs site-ul web este una dintre acele moduri distractive și captivante de a vă aduce site-ul web Divi. De obicei, acest tip de design necesită un plugin sau un cod mai avansat. Dar, acest proces este mult mai ușor folosind Tilt.js (un efect ușor de înclinare a hoverului pentru jQuery). Cu Tilt.js, puteți aplica cu ușurință efecte de înclinare a hoverului la orice în câteva minute.
În acest tutorial, vă vom arăta cum să adăugați efecte de înclinare hover oricărui element al Divi. Folosind o combinație de fragmente jQuery tilt.js și constructorul Divi, vă vom arăta cum să adăugați efecte grozave de înclinare a hoverului la o imagine, o coloană de modul, un rând etc.
Vă vom arăta chiar și cum să adăugați efecte uimitoare de paralaxă 3D.
Să începem!
studiu
Iată o prezentare rapidă a rezultatului pe care îl vom obține în acest tutorial.
Vezi si: Divi: Cum să dezvăluii conținut la trecerea cursorului peste separatorul de secțiuni
Ce ai nevoie pentru a începe
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 Utilizați Divi Builder
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.
Adăugați efecte de înclinare la trecerea cu mouse-ul a oricărui element din Divi
Adăugați un efect Tilt Hover la modulele Divi
Să începem prin a adăuga un rând cu trei coloane la secțiunea obișnuită implicită.
Adăugați un modul Imagine
În prima coloană, adăugați un modul Imagine.
Notă: Puteți utiliza orice modul la alegere. Nu trebuie să fie deloc un modul Image.
Încărcați o imagine la alegere.
Adăugați o clasă de modul Image
Sub filă Avansat, adăugați următoarea clasă CSS:
- Clasa CSS: et-js-tilt
Această clasă va fi folosită ca selector pentru funcția noastră de înclinare mai târziu.
Copiați și lipiți modulul de imagine anterioară
Apoi, copiați modulul Imagine și inserați unul în fiecare dintre cele două coloane rămase.
Dacă doriți, puteți înlocui imaginile duplicate cu altele noi. Doar asigurați-vă că fiecare modul de imagine aparține clasei CSS „et-js-tilt”.
Adăugați biblioteca JQuery „tilt.js”
Pentru a adăuga biblioteca tilt.js și fragmentul de cod necesar pentru a ne denatura imaginile, vom folosi un modul Cod.
Mai întâi, adăugați un rând nou la o coloană sub rândul existent.
Apoi adăugați un modul Cod la noul rând.
Apoi trebuie să accesăm biblioteca tilt.js prin adăugarea unui script care importă tilt.js din CDN-ul lor (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Lipiți următorul script în caseta de cod.
Utilizați următorul cod src într-o etichetă de script pentru a importa biblioteca:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"Ar trebui să arate așa:
Este important să importați tilt.js înainte de a adăuga codul care îl va folosi. Deci, după ce scenariul indică tilt.js, adăugați etichetele de script necesare pentru a încheia JQuery pe care trebuie să îl adăugam. Apoi lipiți următorul JQuery între etichetele de script.
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Rețineți că funcția tilt() este în interiorul unei instrucțiuni if care va rula atunci când lățimea browserului este mai mare de 980px. Acest lucru va asigura că efectul are loc numai pe un computer desktop.
Iată rezultatul.
S-a adăugat efect de hover înclinat la linie
După cum am menționat mai devreme, puteți adăuga acest efect de înclinare hover oricărui element Divi. Aceasta include o linie întreagă.
În plus, puteți adăuga un efect de înclinare la un rând, menținând în același timp efectele de înclinare pentru fiecare dintre modulele din rând.
Iată cum.
Duplicați linia și adăugați clasă unică CSS la linie
Duplicați rândul existent de imagini, apoi deschideți setările rândului duplicat. Sub fila Avansat, dați liniei o clasă CSS unică, după cum urmează:
- Clasa CSS: et-row-js-tilt
Adăugați jQuery
Apoi adăugați următorul jQuery sub funcția anterioară de deformare pentru a aplica o funcție separată de aliniere liniei.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Rețineți că pentru acest efect de înclinare, am redus scara la 1 și am mărit valoarea perspectivei, astfel încât înclinarea să fie mai subtilă.
Iată rezultatul.
Observați cum rândul are o funcție de înclinare care se activează atunci când treceți cu mouse-ul peste rând și fiecare dintre modulele Imagine are, de asemenea, același efect de înclinare pe care l-am adăugat mai devreme. Acesta este modul în care puteți aplica instanțe imbricate cu efect de înclinare.
Adăugați un efect Tilt Hover la o coloană cu mai multe module Divi
În unele cazuri, este util să adăugați un efect oblic unei coloane de module. Acest lucru vă va permite să proiectați mai multe module într-o coloană cu Divi și apoi să aveți toate aceste elemente în unghi ca o singură unitate.
Pentru a vă oferi un exemplu despre cum să faceți acest lucru, vom adăuga un efect de înclinare la hover la o coloană care conține un modul Imagine, un modul Text și un modul Buton.
Adăugați o linie nouă
Pentru a începe, creați un nou rând cu următoarea structură de coloană:
Adăugați un modul Imagine
În coloana 2 (coloana din mijloc), adăugați un nou modul Imagine.
Încărcați o imagine în modul.
Setați alinierea imaginii la centru.
Adăugați un modul Text
Sub modulul Imagine, adăugați un modul Text cu următorul antet H2:
<h2>Local Organic</h2>
Apoi, actualizați stilurile de titlu H2 după cum urmează:
- Font: Berkshire Swash
- Alinierea textului: centrat
- Culoare text: #000000
- Dimensiune: 60px
- Înălțimea liniei: 1,2 em
Adăugați modul de buton
Sub modulul Text, adăugați un modul Button.
Actualizați textul butonului pentru a citi „Aflați mai multe...”
Actualizați setările de personalizare după cum urmează:
- Alinierea butoanelor: Centru
- Utilizați stiluri personalizate pentru buton
- Dimensiunea textului butonului: 18px
- Culoare text: #fff
- Buton de fundal: #000
- Lățimea chenarului butonului: 0 pixeli
- Raza chenarului: 100px
- Font pentru buton: nisipuri mișcătoare
- Greutatea fontului: aldine
- Umplutură (sus și jos): 16px
- Umplutură (stânga și dreapta): 30px
- Box Shadow: vezi captura de ecran
Parametrii coloanei
Odată ce toate cele trei module sunt finalizate, deschideți setările pentru coloana părinte a acelor module (coloana 2) și actualizați următoarele:
- Fundal: #f5cee6
- Umplutură (sus și jos): 50px
- Umplutură (stânga și dreapta): 20px
Adăugarea clasei CSS la coloană
Sub fila avansat, adăugați următoarea clasă CSS:
- Clasa CSS: et-column-js-tilt
S-a adăugat jQuery pentru a aplica efectul de înclinare a coloanei
Pentru a adăuga efectul de oblic la coloană, putem adăuga un alt fragment jQuery similar care vizează coloana CSS Class.
Inserați următorul fragment de cod sub fragmentul de cod anterior care vizează rândul.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Iată rezultatul final.
S-a adăugat efect de paralaxă 3D la elementele interne
Pentru un efect de înclinare a hoverului mai avansat, putem adăuga un efect de paralaxă 3D modulelor interne ale coloanei.
Folosind o combinație de perspective și transform:translateZ() , putem face ca fiecare dintre modulele coloanei să apară în spațiul 3D atunci când efectul de înclinare la hover este activ.
Iată cum.
Duplicați linia anterioară
Mai întâi, duplicați rândul anterior cu efectul de oblic adăugat la coloana din mijloc.
Adăugați o singură clasă de coloană
Apoi actualizați coloana din mijloc (coloana 2) cu o clasă CSS unică, după cum urmează:
- Clasa CSS: et-column-js-tilt-3d
CSS personalizate
Pentru a vă asigura că modulele interne păstrează efectul 3D, adăugați următorul CSS personalizat la elementul principal al coloanei:
transform-style: preserve-3d;
Adăugați jQuery și CSS
Apoi, adăugați mai multe fragmente jQuery sub fragmentul anterior al funcției de declinare care vizează coloana, după cum urmează:
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});Acest jQuery adaugă o altă funcție de înclinare de bază la coloană, la fel ca exemplul anterior.
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
Acum vedeți rezultatul final. Observați cum apar cele trei module în spațiul 3D pe măsură ce se rotesc în timpul efectului de înclinare.
Citiți și: Divi: Cum să dezvăluii conținut la trecerea cursorului peste separatorul de secțiuni
Rezultate finale
Iată o altă privire asupra rezultatelor finale pentru exemplele noastre.
Descărcați DIVI acum!!!
Concluzie
Efectele hover tilt oferite de Tilt.js sunt cu adevărat distractive de experimentat.
Deși am folosit câteva exemple de bază în acest tutorial, puteți avea cu ușurință o zi de teren aplicând aceste efecte de înclinare a hoverului la unul dintre aspectele noastre prestabilite sau pe propriul dvs. site.
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, consultați ghidul nostru cu privire la 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.
...
