Divi: Si të shtoni një efekt animi kur rri pezull mbi një element

Dëshironi të shtoni një efekt animi me Divi në ndonjë element të faqes tuaj?

Shtimi i efekteve të animit të pezullimit në pajisjen tuaj Site Web është një nga ato mënyrat argëtuese dhe tërheqëse për të sjellë tuajën Site Web Divi. Zakonisht ky lloj dizajni kërkon një shtojcë ose kod më të avancuar. Por, ky proces është shumë më i lehtë duke përdorur Tilt.js (një efekt i lehtë i animit të pezullimit për jQuery). Me Tilt.js, mund të aplikoni lehtësisht efektet e animit të pezullimit për çdo gjë në pak minuta.

Në këtë tutorial, ne do t'ju tregojmë se si të shtoni efektet e animit të pezullimit në çdo element të Divi. Duke përdorur një kombinim të fragmenteve të jQuery tilt.js dhe ndërtuesit Divi, ne do t'ju tregojmë se si të shtoni efekte të mrekullueshme të animit të pezullimit në një imazh, kolonë moduli, rresht, etj. 

Ne madje do t'ju tregojmë se si të shtoni efekte të mahnitshme paralaks 3D.

Le të fillojmë!

studim

Këtu është një përmbledhje e shpejtë e rezultatit që do të marrim në këtë tutorial.

Shiko gjithashtu: Divi: Si të zbuloni përmbajtjen kur rri pezull mbi ndarësin e seksionit

Çfarë duhet të filloni

Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.

Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder

Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Shtoni efektet e animit në lëvizjen e çdo elementi në Divi

Shtoni një efekt Tilt Hover në modulet Divi

Le të fillojmë duke shtuar një rresht me tre kolona në seksionin e rregullt të paracaktuar.

Shtoni një modul imazhi

Në kolonën e parë, shtoni një modul Image.

Shënim: Ju mund të përdorni çdo modul sipas zgjedhjes suaj. Nuk duhet të jetë fare një modul i imazhit.

Ngarko një imazh të zgjedhjes suaj. 

Shtoni një klasë të modulit të imazhit

Nën skedinë Avancuar, shtoni klasën e mëposhtme CSS:

• Klasa CSS: et-js-tilt

Kjo klasë do të përdoret si përzgjedhës për funksionin tonë të animit më vonë.

Kopjoni dhe ngjisni modulin e imazhit të mëparshëm

Më pas, kopjoni modulin Image dhe ngjisni një në secilën nga dy kolonat e mbetura.

Nëse dëshironi, mund të zëvendësoni imazhet e kopjuara me të reja. Vetëm sigurohuni që çdo modul imazhi i përket klasës CSS "et-js-tilt".

Shto bibliotekën JQuery "tilt.js"

Për të shtuar bibliotekën anim.js dhe copëza e kodit që nevojitet për të anuar imazhet tona, ne do të përdorim një modul Kodi.

Së pari, shtoni një rresht të ri një kolonë poshtë rreshtit ekzistues.

Pastaj shtoni një modul Kodi në rreshtin e ri.

Atëherë duhet të hyjmë në biblioteka tilt.js duke shtuar një skript që importon tilt.js nga CDN e tyre (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Ngjitni skriptin e mëposhtëm në kutinë e kodit.

Përdorni kodin e mëposhtëm src në një etiketë skripti për të importuar bibliotekën:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

Duhet të duket kështu:

Është e rëndësishme të importosh anim.js përpara se të shtoni kodin që do ta përdorë atë. Pra, pasi skenari tregon për anim.js, shtoni etiketat e nevojshme të skriptit për të mbështjellë JQuery që duhet të shtojmë. Pastaj ngjisni JQuery në vijim midis etiketave të skriptit.

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {
 
    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });
 
  }
});

Vini re se funksioni tilt() është brenda një deklarate if që do të ekzekutohet kur gjerësia e shfletuesit është më e madhe se 980px. Kjo do të sigurojë që efekti të ndodhë vetëm në një kompjuter desktop.

Këtu është rezultati.

U shtua efekti i pezullimit të animit në linjë

Siç e përmendëm më parë, mund ta shtoni këtë efekt të animit të pezullimit në çdo element Divi. Kjo përfshin një linjë të tërë. 

Për më tepër, mund të shtoni një efekt animi në një rresht duke ruajtur efektet e animit për secilin prej moduleve brenda rreshtit.

Ja se si.

Dubliko rreshtin dhe shto klasën unike CSS në rresht

Dublikojeni rreshtin ekzistues të imazheve, më pas hapni cilësimet e rreshtit të kopjuar. Nën skedën Avancuar, jepini linjës një klasë unike CSS si më poshtë:

• Klasa CSS: et-row-js-tilt

Shto jQuery

Më pas shtoni jQuery-n e mëposhtëm poshtë funksionit të mëparshëm të animit për të aplikuar një funksion të veçantë të animit në linjë.

$(".et-row-js-tilt").tilt({
  scale: 1,
  perspective: 1200,
});

Vini re se për këtë efekt animi, ne kemi reduktuar shkallën në 1 dhe kemi rritur vlerën e perspektivës në mënyrë që animi të jetë më delikat.

Këtu është rezultati.

Vini re se si rreshti ka një veçori animi që aktivizohet kur rri pezull mbi rresht dhe secili prej moduleve të Imazhit gjithashtu ka të njëjtin efekt animi që shtuam më parë. Kjo është mënyra se si mund të aplikoni instancat e efektit të animit të mbivendosur.

Shtoni një efekt Tilt Hover në një kolonë me disa module Divi

Në disa raste, është e dobishme të shtoni një efekt animi në një kolonë modulesh. Kjo do t'ju lejojë të dizajnoni module të shumta në një kolonë me Divi dhe më pas t'i keni të gjithë ata elementë të kënduar si një njësi e vetme. 

Për t'ju dhënë një shembull se si ta bëni këtë, ne do të shtojmë një efekt animi në lëvizje në një kolonë që përmban një modul imazhi, një modul teksti dhe një modul Butoni.

Shto një rresht të ri

Për të filluar, krijoni një rresht të ri me strukturën e kolonës vijuese:

Shtoni një modul imazhi

Brenda kolonës 2 (kolona e mesme), shtoni një modul të ri imazhi.

Ngarko një imazh në modul.

Vendosni shtrirjen e imazhit në qendër.

Shtoni një modul teksti

Nën modulin Imazh, shtoni një modul Teksti me kokën e mëposhtme H2:

<h2>Local Organic</h2>

Më pas, përditësoni stilet e titullit H2 si më poshtë:

• Fonti: Berkshire Swash
• Rreshtimi i tekstit: në qendër
• Ngjyra e tekstit: #000000
• Madhësia: 60 px
• Lartësia e linjës: 1,2 em

Shto Modulin e Butonit

Nën modulin Tekst, shtoni një modul Button.

Përditëso tekstin e butonit për të lexuar "Mëso më shumë..."

Përditësoni cilësimet e personalizimit si më poshtë:

• Shtrirja e butonave: në qendër

• Përdorni stilet e personalizuara për butonin
• Madhësia e tekstit të butonit: 18 px
• Ngjyra e tekstit: #fff
• Sfondi i butonit: #000

• Gjerësia e kufirit të butonit: 0 piksel
• Rrezja kufitare: 100 px
• Fonti i butonit: Quicksand
• Pesha e shkronjave: Bold

• Mbushje (lart dhe poshtë): 16 px
• Mbushje (majtas dhe djathtas): 30 px

• Box Shadow: shikoni pamjen e ekranit

Parametrat e kolonës

Pasi të jenë përfunduar të tre modulet, hapni cilësimet për kolonën mëmë të atyre moduleve (kolona 2) dhe përditësoni sa vijon:

• Sfondi: #f5cee6

• Mbushje (lart dhe poshtë): 50 px
• Mbushje (majtas dhe djathtas): 20 px

Shtimi i klasës CSS në kolonë

Nën skedën e avancuar, shtoni klasën e mëposhtme CSS:

• Klasa CSS: et-column-js-tilt

U shtua jQuery për të aplikuar efektin e animit në kolonë

Për të shtuar efektin e animit në kolonë, mund të shtojmë një fragment tjetër të ngjashëm jQuery që synon kolonën e klasës CSS. 

Ngjitni fragmentin e mëposhtëm të kodit poshtë copës së kodit të mëparshëm që synon rreshtin.

$(".et-column-js-tilt").tilt({
  scale: 1.1,
  perspective: 1000,
});

Këtu është rezultati përfundimtar.

U shtua efekti paralaks 3D në pjesët e brendshme

Për një efekt më të avancuar të animit të pezullimit, ne mund të shtojmë një efekt paralaks 3D në modulet e brendshme të kolonës. 

Duke përdorur një kombinim të perspektivës dhe transform:translateZ(), ne mund të bëjmë që secili prej moduleve të kolonës të shfaqet në hapësirën 3D kur efekti anim-on-hover është aktiv.

Ja se si.

Dubliko rreshtin e mëparshëm

Së pari, kopjoni rreshtin e mëparshëm me efektin e animit të shtuar në kolonën e mesme.

Shtoni një klasë të vetme kolone

Pastaj përditësoni kolonën e mesme (kolona 2) me një klasë unike CSS si më poshtë:

• Klasa CSS: et-column-js-tilt-3d

Custom CSS

Për të siguruar që modulet e brendshme ruajnë efektin 3D, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor të kolonës:

transform-style: preserve-3d;

Shtoni jQuery dhe CSS

Më pas, shtoni disa fragmente të tjera jQuery poshtë fragmentit të mëparshëm të funksionit të anuar që synon kolonën si më poshtë:

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");
});

Ky jQuery shton një funksion tjetër bazë të animit në kolonë, ashtu si shembulli i mëparshëm. 

.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);
}

Tani shikoni rezultatin përfundimtar. Vini re se si shfaqen të tre modulet në hapësirën 3D ndërsa rrotullohen gjatë efektit të animit.

Lexo gjithashtu: Divi: Si të zbuloni përmbajtjen kur rri pezull mbi ndarësin e seksionit

Rezultatet përfundimtare

Ja një vështrim tjetër i rezultateve përfundimtare për shembujt tanë.

Shkarkoni DIVI tani!!!

Përfundim

Efektet e animit të pezullimit të ofruara nga Anoj.js janë vërtet argëtuese për të eksperimentuar. 

Edhe pse ne kemi përdorur disa shembuj bazë në këtë tutorial, ju mund të keni lehtësisht një ditë në terren duke aplikuar këto efekte të animit të pezullimit në një nga paraqitjet tona të parapërgatitura ose në faqen tuaj.

Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...