Divi: Ako pridať efekt naklonenia pri umiestnení kurzora myši nad prvok

Chcete pridať efekt naklonenia pomocou divi na niektorý prvok vašej stránky?

Pridanie efektov naklonenia po umiestnení kurzora myši do vášho webové stránky je jedným z tých zábavných a pútavých spôsobov, ako priniesť svoje webové stránky divi. Tento typ dizajnu zvyčajne vyžaduje doplnok alebo pokročilejší kód. Tento proces je však oveľa jednoduchší s použitím Tilt.js (efekt mierneho naklonenia kurzora pre jQuery). Pomocou Tilt.js môžete jednoducho aplikovať efekty naklonenia pri umiestnení kurzora na čokoľvek v priebehu niekoľkých minút.

V tomto návode vám ukážeme, ako pridať efekty náklonu pri umiestnení kurzora do ľubovoľného prvku divi. Pomocou kombinácie úryvkov jQuery tilt.js a nástroja Divi Builder vám ukážeme, ako pridať úžasné efekty naklonenia kurzora na obrázok, stĺpec modulu, riadok atď. 

Dokonca vám ukážeme, ako pridať úžasné 3D paralaxové efekty.

Začnime!

prehľad

Tu je rýchly prehľad výsledku, ktorý získame v tomto návode.

Pozri tiež: Divi: Ako odhaliť obsah pri umiestnení kurzora myši nad oddeľovač sekcií

Čo potrebujete, aby ste začali

Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.

Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder

potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)

Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.

Pridajte efekty naklonenia pri umiestnení kurzora myši na ľubovoľný prvok v Divi

Pridajte efekt Tilt Hover do modulov Divi

Začnime pridaním riadku s tromi stĺpcami do predvolenej bežnej sekcie.

Pridajte obrázkový modul

V prvom stĺpci pridajte modul Obrázok.

Poznámka: Môžete použiť ľubovoľný modul podľa vlastného výberu. Vôbec to nemusí byť Image modul.

Nahrajte obrázok podľa vlastného výberu. 

Pridajte triedu obrázkového modulu

Pod záložkou pokročilý, pridajte nasledujúcu triedu CSS:

• CSS Trieda: et-js-tilt

Táto trieda sa neskôr použije ako selektor pre našu funkciu naklonenia.

Skopírujte a prilepte modul predchádzajúceho obrázka

Potom skopírujte modul Image a vložte jeden do každého z dvoch zostávajúcich stĺpcov.

Ak chcete, duplicitné obrázky môžete nahradiť novými. Len sa uistite, že každý modul obrázka patrí do triedy CSS "et-js-tilt".

Pridajte knižnicu JQuery „tilt.js“

Ak chcete pridať knižnicu tilt.js a útržok kódu potrebný na skreslenie našich obrázkov, použijeme modul Kód.

Najprv pridajte nový riadok jeden stĺpec pod existujúci riadok.

Potom pridajte modul Kód do nového riadku.

Potom musíme získať prístup k knižnica tilt.js pridaním skriptu, ktorý importuje tilt.js z ich CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Prilepte nasledujúci skript do poľa kódu.

Na import knižnice použite nasledujúci kód src v značke skriptu:

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

Malo by to vyzerať takto:

Dôležité je dovážať tilt.js pred pridaním kódu, ktorý ho bude používať. Takže potom, čo scenár poukazuje na tilt.js, pridajte potrebné značky skriptu na zabalenie JQuery, ktoré musíme pridať. Potom vložte nasledujúci JQuery medzi značky skriptu.

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

Všimnite si, že funkcia tilt() je vo vnútri príkazu if, ktorý sa spustí, keď je šírka prehliadača väčšia ako 980 pixelov. Tým sa zabezpečí, že efekt sa prejaví len na stolnom počítači.

Tu je výsledok.

Pridaný efekt naklonenia kurzora na čiaru

Ako sme už spomenuli, tento efekt naklonenia vznášania môžete pridať k akémukoľvek prvku Divi. To zahŕňa celý riadok. 

Okrem toho môžete do riadku pridať efekt naklonenia pri zachovaní efektov naklonenia pre každý z modulov v riadku.

Tu je návod.

Duplikujte riadok a pridajte do riadku jedinečnú triedu CSS

Duplikujte existujúci riadok obrázkov a potom otvorte nastavenia duplicitného riadka. Pod záložkou pokročilý, dajte riadku jedinečnú triedu CSS takto:

• CSS Trieda: et-row-js-tilt

Pridajte jQuery

Potom pridajte nasledujúci jQuery pod predchádzajúcu funkciu zošikmenia, aby ste na riadok použili samostatnú funkciu zošikmenia.

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

Všimnite si, že pre tento efekt naklonenia sme znížili mierku na 1 a zvýšili hodnotu perspektívy, aby bol sklon jemnejší.

Tu je výsledok.

Všimnite si, že riadok má funkciu naklonenia, ktorá sa aktivuje, keď umiestnite kurzor myši nad riadok, a každý z modulov obrázka má tiež rovnaký efekt naklonenia, aký sme pridali predtým. Takto môžete použiť vnorené inštancie efektu naklonenia.

Pridajte efekt Tilt Hover do stĺpca s niekoľkými modulmi Divi

V niektorých prípadoch je užitočné pridať do stĺpca modulov efekt zošikmenia. To vám umožní navrhnúť viacero modulov v stĺpci s Divi a potom mať všetky tieto prvky naklonené ako jeden celok. 

Aby sme vám poskytli príklad, ako to urobiť, pridáme efekt naklonenia pri umiestnení kurzora myši do stĺpca obsahujúceho modul Obrázok, modul Text a modul Tlačidlo.

Pridať nový riadok

Ak chcete začať, vytvorte nový riadok s nasledujúcou štruktúrou stĺpcov:

Pridajte obrázkový modul

Do stĺpca 2 (stredný stĺpec) pridajte nový modul Image.

Nahrajte obrázok do modulu.

Nastavte zarovnanie obrázka na stred.

Pridajte textový modul

Pod modul Obrázok pridajte textový modul s nasledujúcou hlavičkou H2:

<h2>Local Organic</h2>

Ďalej aktualizujte štýly nadpisov H2 takto:

• Písmo: Berkshire Swash
• Zarovnanie textu: na stred
• Farba textu: #000000
• Veľkosť: 60px
• Výška riadku: 1,2 em

Pridať modul tlačidiel

Pod modul Text pridajte modul Button.

Aktualizujte text tlačidla tak, aby čítal „Viac informácií...“

Aktualizujte nastavenia prispôsobenia takto:

• Zarovnanie tlačidiel: Stred

• Použite vlastné štýly pre tlačidlo
• Veľkosť textu tlačidla: 18px
• Farba textu: #fff
• Pozadie tlačidla: #000

• Šírka okraja tlačidla: 0 pixelov
• Polomer okraja: 100 pixelov
• Písmo tlačidla: Quicksand
• Hrúbka písma: tučné

• Výplň (horná a dolná časť): 16 pixelov
• Výplň (vľavo a vpravo): 30 pixelov

• Box Shadow: pozri snímku obrazovky

Parametre stĺpca

Po dokončení všetkých troch modulov otvorte nastavenia pre nadradený stĺpec týchto modulov (stĺpec 2) a aktualizujte nasledujúce:

• Pozadie: #f5cee6

• Výplň (horná a dolná časť): 50 pixelov
• Výplň (vľavo a vpravo): 20 pixelov

Pridanie triedy CSS do stĺpca

Na karte Rozšírené pridajte nasledujúcu triedu CSS:

• CSS Trieda: et-column-js-tilt

Pridaný jQuery na použitie efektu naklonenia na stĺpec

Ak chcete pridať efekt zošikmenia do stĺpca, môžeme pridať ďalší podobný útržok jQuery, ktorý je zacielený na stĺpec triedy CSS. 

Prilepte nasledujúci útržok kódu pod predchádzajúci útržok kódu zacielený na riadok.

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

Toto je konečný výsledok.

Pridaný 3D paralaxový efekt do vnútorných častí

Pre pokročilejší efekt nakláňania hoveru môžeme pridať 3D paralaxový efekt do vnútorných stĺpových modulov. 

Použitím kombinácie perspektívy a transform:translateZ() môžeme dosiahnuť, aby sa každý z modulov stĺpca objavil v 3D priestore, keď je aktívny efekt naklonenia pri naklonení.

Tu je návod.

Duplikovať predchádzajúci riadok

Najprv duplikujte predchádzajúci riadok s efektom zošikmenia pridaným do stredného stĺpca.

Pridajte triedu jedného stĺpca

Potom aktualizujte stredný stĺpec (stĺpec 2) jedinečnou triedou CSS takto:

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

Vlastné CSS

Aby ste zaistili, že interné moduly zachovajú 3D efekt, pridajte do prvku hlavného stĺpca nasledujúci vlastný CSS:

transform-style: preserve-3d;

Pridajte jQuery a CSS

Potom pridajte niekoľko ďalších útržkov jQuery pod predchádzajúci útržok funkcie zošikmenia so zacielením na stĺpec takto:

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

Tento jQuery pridáva do stĺpca ďalšiu základnú funkciu naklonenia, rovnako ako predchádzajúci príklad. 

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

Teraz si pozrite konečný výsledok. Všimnite si, ako sa tri moduly zobrazujú v 3D priestore, keď sa otáčajú počas efektu naklonenia.

Čítajte tiež: Divi: Ako odhaliť obsah pri umiestnení kurzora myši nad oddeľovač sekcií

Konečné výsledky

Tu je ďalší pohľad na konečné výsledky našich príkladov.

Stiahnite si DIVI teraz!!!

záver

Efekty naklonenia vznášania, ktoré ponúka Tilt.js je naozaj zábavné experimentovať. 

Aj keď sme v tomto návode použili niekoľko základných príkladov, môžete jednoducho zažiť deň v teréne, keď použijete tieto efekty naklonenia vznášania na jedno z našich vopred pripravených rozložení alebo na svoju vlastnú stránku.

Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.

Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...