Cum să creați un efect de animație 3D Mousemove dinamic în Divi

Crearea unei animații dinamice 3D de eliminare a mouse-ului este un mod distractiv și interesant pentru utilizatori de a interacționa cu conținutul web pe site-ul dvs. Divi. Designul este dinamic prin faptul că animația se va deplasa cu cursorul. În mod normal, animăm obiecte pe hover sau pe clic. Dar, în acest tutorial, vom introduce un mod creativ de a anima obiecte pe mousemove (mutând cursorul în diferite locații din fereastra browserului). Dar asta nu este tot. Vă vom arăta, de asemenea, cum să combinați animația pentru a elimina mouse-ul cu un efect de plutire care face ca elementele să apară într-un design 3D care va aduce conținutul dvs. la viață într-un mod cu totul nou.

Pentru a-l construi, vom folosi constructorul Divi pentru cea mai mare parte a designului. Apoi vom folosi câteva CSS personalizate și JQuery pentru a crea funcționalitatea de animație.

După ce ați terminat, veți avea un design impresionant pentru a prezenta produse sau servicii noi la următorul dvs. proiect!

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

De asemenea, puteți verifica acest codepen pentru a vedea o demonstrație live a efectului.

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 secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil î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 unui efect de animație 3D Mousemove dinamic în Divi

Partea 1: Crearea containerului Hover și a cardului cu un rând și o coloană

Pentru acest efect de animație, rândul va fi ținta care activează animația 3d la plecare. Putem numi acest container container. Coloana va servi drept cartea noastră care se va anima împreună cu elementele sale copil atunci când se deplasează peste rând.

Dar, înainte de a crea rândul și coloana, să stilizăm secțiunea.

Sectiunea

Pentru a începe, deschideți setările pentru secțiunea obișnuită implicită și actualizați următoarele:

• Culoare fundal: rgba (68,55,99,0,1)

• Căptușeală: 7vh sus, 7vh jos

The Row (Hover Container)

Adăugați un rând cu o coloană la secțiune.

Setări rând

Sub setările rândului, actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 70% (desktop), 60% (tabletă), 50% (telefon)
• Căptușeală: 7vh, sus, 7vh jos, 5vw stânga, 5vw dreapta

NOTĂ: Trucul de aici este să creați un rând cu suficient spațiu în jurul coloanei, astfel încât să puteți angaja animația de mișcare a cărții prin deplasarea cursorului în jurul întregii zone a rândului (nu a coloanei). În acest fel puteți avea mai mult spațiu pentru a muta cardul. De asemenea, doriți să lăsați suficient spațiu în jurul rândului, astfel încât să puteți muta cursorul în afara rândului (în spațiul secțiunii care înconjoară rândul) pentru a dezactiva animația și a permite elementelor cărții să se fixeze înapoi în loc.

Sub fila avansată, dați rândului o clasă personalizată:

• Clasa CSS: et-hover-container

Apoi adăugați următorul CSS la elementul principal:

display:flex;
align-items:center;
justify-content:center;

Acest mic fragment menține coloana centrată pe verticală și orizontală în interiorul rândului (necesar pentru că vom da coloanei noastre o lățime maximă setată).

Coloana (sau cardul)

După actualizarea rândului, deschideți setările coloanei pentru a crea stilul cardului nostru după cum urmează:

• Culoare fundal: #ffffff

• Căptușeală: 7vh sus, 7vh jos, 5% stânga, 5% dreapta
• Colțuri rotunjite: 30 px

• Box Shadow: vezi captura de ecran
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,2)

Sub fila Avansat, dați coloanei o clasă personalizată:

• Clasa CSS: et-mousemove-card

Apoi adăugați acest CSS personalizat la elementul principal:

max-width: 600px;

Apoi asigurați-vă că setați proprietățile de revărsare la „vizibile”.

• Overflow orizontal: vizibil
• Vertical Overflow: vizibil

NOTĂ: Acordarea coloanei cu o lățime maximă de 600 px menține designul mai consecvent pe diferite dimensiuni ale browserului și, de asemenea, mărește cantitatea de spațiu de deplasare în jurul coloanei pentru containerul (sau rândul) de deplasare. Raza chenarului (colțuri rotunjite) pe care le-am adăugat va ascunde preaplinul, așa că trebuie să setăm preaplinul la vizibil. Dacă nu facem acest lucru, animația nu va funcționa așa cum era de așteptat.

Partea 2: Crearea elementelor cardului

# 1 Fundalul cercului cu sigla

Pentru primul element din cardul nostru, vom adăuga un fundal cerc care include un logo care va sta în spatele imaginii bicicletei noastre.

Adăugați un nou modul de text în coloană.

Scoateți textul implicit, astfel încât conținutul corpului să fie gol.

Apoi adăugați un fundal de gradient:

• Culoare stânga de fundal degradat: # 443763
• Culoare dreaptă de fundal degradat: # ea3900

În plus față de fundalul degradat, adăugați o siglă pentru imaginea de fundal.

• Imagine de fundal: [adăugați orice imagine de logo png care are aproximativ 60 px cu 60 px]
• Dimensiunea imaginii de fundal: dimensiunea reală

Sub fila Proiectare, actualizați următoarele:

• Lățime: 160 px (desktop), 150 px (tabletă), 80 px (telefon)
• Înălțime: 160 px (desktop), 150 px (tabletă), 80 px (telefon)
• Colțuri rotunjite: 50%

Valorile potrivite pentru lățime și înălțime și raza de margine de 50% ne dau forma cercului pe care îl căutăm.

Sub fila Advanced, actualizați poziția după cum urmează:

• Poziție: Absolută
• Locație: Centrul de sus
• Decalaj vertical: 15%

# 2 Imaginea cardului

Pentru a crea imaginea produsului (în acest caz o bicicletă), adăugați un nou modul de imagine sub modulul text anterior.

Apoi încărcați imaginea în modul. Asigurați-vă că este o imagine în format png cu un fundal transparent. Folosesc imaginea bicicletei din pachetul nostru de aspect pentru reparații biciclete.

Sub fila Proiectare, actualizați următoarele:

• Aliniere imagine: centru
• Lățime: 90%
• Marja: 4vh jos

Sub fila Advanced, acordați imaginii o clasă personalizată:

• Clasa CSS: et-card-image

# 3 Titlul cardului

Cu imaginea noastră în poziție, adăugați un nou modul de text sub acesta pentru a crea antetul cardului nostru.

În conținutul corpului noului modul de text, lipiți următorul titlu H2 HTML:

<h2>The <span style="color: #ea3900;">Divi</span> Bike</h2>

Sub fila Proiectare, actualizați următoarele:

• Rubrica 2 Font: Bebas Neue
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoare text: # 443763
• Titlul 2 Dimensiune text: 75 px (desktop), 60 px (tabletă), 45 px (telefon)
• Rubrica 2 Spațierea literelor: 0,05em
• Marja: 4vh jos

Sub fila Advanced, adăugați o clasă personalizată:

• Clasa CSS: et-card-heading

# 4 Textul cu informații despre card

Folosirea modulelor de text separate pentru titlu și informații, ne va permite să adăugăm diferite efecte de animație 3d la fiecare dintre ele. Pentru a crea textul de informații sub titlu, adăugați un nou modul de text sub modulul de text de titlu.

Apoi adăugați următorul conținut în corp:

<p>The One and Only Divi Bike<br>(By Elegant Themes)</p>

Sub fila Proiectare, actualizați următoarele:

• Greutatea fontului textului: Semi Bold
• Dimensiune text text: 18 px (desktop), 16 px (tabletă și telefon)
• Înălțimea liniei textului: 1,8em
• Alinierea textului: centru
• Marja: 4vh

Apoi acordați modulului text o clasă personalizată:

• Clasa CSS: et-card-info

# 5 Butonul Cardului

Pentru a crea butonul pentru card, adăugați un nou modul de buton sub modulul de informații.

În modul de setare a butonului, actualizați textul butonului.

• Text buton: faceți o ofertă

Sub fila Design, stilizați butonul după cum urmează:

• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 25 px (desktop), 20 px (tabletă), 16 px (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 443763
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 30 px
• Distanța dintre litere și butoane: 0,1em
• Buton Font: Bebas Neue
• Căptușeală (desktop): 0,5em sus, 0,5em jos, 3em stânga, 3em dreapta
• Căptușeală (telefon): 0,5em sus, 0,5em jos, 2em stânga, 2em dreapta

Apoi acordați butonului o clasă personalizată:

• buton et-card

Rezultatul Până acum

Iată rezultatul designului de până acum.

Acum, tot ce ne trebuie este un cod personalizat.

Partea 3: Adăugarea codului personalizat (CSS și JQuery)

Acum, după ce designul nostru este complet, putem adăuga codul CSS și JQuery necesar pentru a crea efectul de animație dinamic 3d mousemove la card / coloană și elementele cardului.

Pentru a face acest lucru, adăugați un modul de cod sub modulul buton.

Apoi lipiți următorul CSS personalizat în caseta de cod, asigurându-vă că înfășurați CSS în etichetele de stil .

/*add perspective to row for 3d perspective of child elements*/ 
.et-hover-container {
perspective: 1000px;
}

/*preserve-3d needed for 3d effect on card elements*/ 
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

/*transition timing function and duration for card elements*/ 
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}

Sub CSS, lipiți următorul JQuery asigurându-vă că înfășurați codul în etichetele de script .

jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});

//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});

Despre Cod

CSS

Pentru a oferi elementele noastre poziționate în 3D (coloana și modulele), trebuie să folosim proprietatea CSS de perspectivă pe rând (sau pe container).

.et-hover-container {
perspective: 1000px;
}

Apoi, trebuie să ne asigurăm că acele elemente ale cărții sunt poziționate în spațiul 3D utilizând proprietatea în stil transformare cu valoarea de conservare-3d.

.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

Apoi stabilim funcția și durata temporizării tranziției atunci când elementele cărții sunt animate.

.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

În cele din urmă, folosim proprietatea de transformare cu o funcție translateZ pentru a muta elementele de pe axa z creând efectul popout ori de câte ori trecem peste rând și clasa transform-3d este adăugată fiecărui element.

.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}

JQuery

În primul rând, declarăm toate variabilele necesare pentru a viza elementele în funcție de clasa lor personalizată.

//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");

Apoi, atașăm evenimentul mousemove la rând (sau hover container) cu o funcție care calculează poziția cursorului pentru axa X și Y a ferestrei browserului și apoi rotește cardul mousemove (sau coloana) ca X și Y valorile se schimbă dinamic.

//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});

Pentru a activa transformarea CSS (cu translateZ) care mută elementele cardului în spațiul Z, comutăm clasa transform-3d la fiecare element atunci când treceți peste rând (sau plasați containerul).

//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});

Apoi, trebuie să atașăm evenimentul mouseleave la rând cu o funcție care adaugă o proprietate de transformare CSS cu funcțiile rotateY și rotateX la 0 grade. Acest lucru va fixa coloana (sau cardul) la loc atunci când cursorul se deplasează afară din rând.

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});

Rezultat final

Verificați rezultatul final!

De asemenea, puteți verifica acest codepen pentru a vedea o demonstrație live a efectului.

Gânduri finale

Efectul de animație dinamic 3d mousemove pe care l-am construit în acest tutorial include efecte de animație unice și avansate care pot fi ușor învățate și interesante de explorat. Animația care permite utilizatorilor să interacționeze cu designul poate fi realizată cu câteva linii de JQuery. Și efectele de deplasare 3D se bazează pe câteva proprietăți CSS care pot fi ușor învățate. Una peste alta, există atât de multe posibilități care pot veni din combinarea unui puternic constructor de pagini precum Divi cu magia JQuery. Sperăm că acesta vă va fi de folos.

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

Noroc!