Divi: Jak přidat efekt naklonění při najetí myší na prvek

, vyrábí jej Gaetan | divi, Divi Tutoriály

Chcete přidat efekt naklonění pomocí divi na některý prvek vaší stránky?

Přidání efektů náklonu po najetí do vašeho Webové stránky je jedním z těch zábavných a poutavých způsobů, jak přinést své Webové stránky divi. Obvykle tento typ designu vyžaduje plugin nebo pokročilejší kód. Tento proces je však mnohem snazší s použitím Tilt.js (efekt mírného naklonění kurzoru pro jQuery). S Tilt.js můžete snadno aplikovat efekty naklonění při naklánění na cokoli během několika minut.

V tomto tutoriálu vám ukážeme, jak přidat efekty náklonu při naklánění k libovolnému prvku divi. Pomocí kombinace úryvků jQuery tilt.js a Divi builderu vám ukážeme, jak přidat úžasné efekty naklonění při najetí na obrázek, sloupec modulu, řádek atd. 

Dokonce vám ukážeme, jak přidat úžasné 3D paralaxové efekty.

Začněme!

přehled

Zde je rychlý přehled výsledku, kterého se dočkáme v tomto tutoriálu.

Viz také: Divi: Jak odhalit obsah při najetí myší na oddělovač sekcí

Co potřebujete, abyste mohli začít

Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.

divi

Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder

poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Přidejte efekty naklonění při umístění kurzoru na jakýkoli prvek v Divi

Přidejte efekt Tilt Hover do modulů Divi

Začněme přidáním třísloupcového řádku do výchozí běžné sekce.

Přidejte modul Image

V prvním sloupci přidejte modul Image.

Poznámka: Můžete použít libovolný modul dle vašeho výběru. Vůbec to nemusí být Image modul.

Nahrajte obrázek dle vlastního výběru. 

Přidejte třídu modulu Image

Na kartě pokročilý, přidejte následující třídu CSS:

  • CSS Třída: et-js-tilt

Tato třída bude později použita jako selektor pro naši funkci naklonění.

Kopírovat a vložit modul předchozího obrázku

Dále zkopírujte modul Image a vložte jeden do každého ze dvou zbývajících sloupců.

Pokud chcete, můžete duplicitní obrázky nahradit novými. Jen se ujistěte, že každý obrázkový modul patří do třídy CSS "et-js-tilt".

Přidejte knihovnu JQuery „tilt.js“

Chcete-li přidat knihovnu tilt.js a úryvek kódu potřebný ke zkreslení našich obrázků, použijeme modul Kód.

Nejprve přidejte nový řádek jeden sloupec pod stávající řádek.

Poté do nového řádku přidejte modul Kód.

Pak musíme získat přístup k Knihovna tilt.js přidáním skriptu, který importuje tilt.js z jejich CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Vložte následující skript do pole kódu.

K importu knihovny použijte ve značce skriptu následující kód src:

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

Mělo by to vypadat takto:

Je důležité importovat tilt.js před přidáním kódu, který jej bude používat. Takže poté, co skript ukazuje na tilt.js, přidejte potřebné značky skriptu pro zabalení JQuery, který potřebujeme přidat. Poté vložte následující JQuery mezi 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šimněte si, že funkce tilt() je uvnitř příkazu if, který se spustí, když je šířka prohlížeče větší než 980 pixelů. Tím zajistíte, že se efekt projeví pouze na stolním počítači.

Zde je výsledek.

Přidán efekt naklonění na čáru

Jak jsme již zmínili, tento efekt náklonu můžete přidat k jakémukoli prvku Divi. To zahrnuje celou řadu. 

Navíc můžete do řádku přidat efekt naklonění a přitom zachovat efekty naklonění pro každý z modulů v řadě.

Zde je návod.

Duplikujte řádek a přidejte na řádek jedinečnou třídu CSS

Zduplikujte existující řádek obrázků a poté otevřete nastavení duplicitního řádku. Pod záložkou pokročilý, dejte řádku jedinečnou třídu CSS takto:

  • Třída CSS: et-row-js-tilt
#image_title

Přidejte jQuery

Poté přidejte následující jQuery pod předchozí funkci zkosení, abyste na řádek použili samostatnou funkci zkosení.

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

Všimněte si, že pro tento efekt naklonění jsme zmenšili měřítko na 1 a zvýšili hodnotu perspektivy, aby bylo naklonění jemnější.

Zde je výsledek.

Všimněte si, že řádek má funkci naklonění, která se aktivuje, když najedete na řádek, a každý z obrazových modulů má také stejný efekt naklonění, jaký jsme přidali dříve. Takto můžete použít vnořené instance efektu naklonění.

Přidejte efekt Tilt Hover do sloupu s několika moduly Divi

V některých případech je užitečné přidat do sloupce modulů efekt zkosení. To vám umožní navrhnout více modulů ve sloupci s Divi a poté mít všechny tyto prvky natočené jako jeden celek. 

Abychom vám dali příklad, jak to udělat, přidáme efekt naklonění při najetí do sloupce obsahujícího modul Obrázek, modul Text a modul Tlačítko.

Přidat nový řádek

Chcete-li začít, vytvořte nový řádek s následující strukturou sloupců:

Přidejte modul Image

Do sloupce 2 (prostřední sloupec) přidejte nový modul Image.

Nahrajte obrázek do modulu.

#image_title

Nastavte zarovnání obrázku na střed.

Přidejte textový modul

Pod modul Obrázek přidejte modul Text s následujícím záhlavím H2:

<h2>Local Organic</h2>
#image_title

Dále aktualizujte styly nadpisů H2 následovně:

  • Písmo: Berkshire Swash
  • Zarovnání textu: Na střed
  • Barva textu: #000000
  • Velikost: 60px
  • Výška řádku: 1,2 em
#image_title

Přidat modul tlačítka

Pod modul Text přidejte modul Tlačítko.

Aktualizujte text tlačítka na „Další informace...“

#image_title

Aktualizujte nastavení přizpůsobení následovně:

  • Zarovnání tlačítek: Střed
  • Použít vlastní styly pro tlačítko
  • Velikost textu tlačítka: 18px
  • Barva textu: #fff
  • Pozadí tlačítka: #000
#image_title
  • Šířka okraje tlačítka: 0 pixelů
  • Poloměr ohraničení: 100 pixelů
  • Písmo tlačítka: Quicksand
  • Tloušťka písma: Tučné
#image_title
  • Výplň (nahoře a dole): 16 pixelů
  • Výplň (vlevo a vpravo): 30px
#image_title
  • Box Shadow: viz snímek obrazovky
#image_title

Parametry sloupce

Po dokončení všech tří modulů otevřete nastavení pro nadřazený sloupec těchto modulů (sloupec 2) a aktualizujte následující:

  • Pozadí: #f5cee6
#image_title
  • Výplň (nahoře a dole): 50 pixelů
  • Výplň (vlevo a vpravo): 20px
#image_title

Přidání třídy CSS do sloupce

Na kartě Upřesnit přidejte následující třídu CSS:

  • Třída CSS: et-column-js-tilt
#image_title

Přidán jQuery pro použití efektu naklonění na sloupec

Chcete-li přidat efekt zkosení do sloupce, můžeme přidat další podobný fragment jQuery, který cílí na sloupec třídy CSS. 

Vložte následující fragment kódu pod předchozí fragment kódu, který cílí na řádek.

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

Zde je konečný výsledek.

Přidán 3D efekt paralaxy do vnitřních částí

Pro pokročilejší efekt náklonu hoveru můžeme přidat 3D efekt paralaxy do vnitřních sloupových modulů. 

Pomocí kombinace perspektivy a transform:translateZ() můžeme při aktivaci efektu naklonění při najetí na objekt zobrazit každý z modulů sloupce ve 3D prostoru.

Zde je návod.

Duplikovat předchozí řádek

Nejprve duplikujte předchozí řádek s efektem zkosení přidaným do prostředního sloupce.

#image_title

Přidejte třídu jednoho sloupce

Poté aktualizujte prostřední sloupec (sloupec 2) jedinečnou třídou CSS takto:

  • Třída CSS: et-column-js-tilt-3d
#image_title

Vlastní CSS

Chcete-li zajistit, aby interní moduly zachovaly 3D efekt, přidejte do hlavního prvku sloupce následující vlastní CSS:

transform-style: preserve-3d;
Efekt naklonění s Divi

Přidejte jQuery a CSS

Dále přidejte další úryvky jQuery pod předchozí úryvek funkce zkosení zacílený na sloupec následovně:

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 přidává další základní funkci naklonění do sloupce, stejně jako předchozí pří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);
}
Efekt naklonění s Divi

Nyní se podívejte na konečný výsledek. Všimněte si, jak se tři moduly objevují ve 3D prostoru, když se otáčejí během efektu naklonění.

Čtěte také: Divi: Jak odhalit obsah při najetí myší na oddělovač sekcí

Konečné výsledky

Zde je další pohled na konečné výsledky našich příkladů.

Stáhněte si DIVI hned teď!!!

Proč investovat do čističky vzduchu?

Efekty naklonění hoverem, které nabízí Tilt.js je opravdu zábavné experimentovat. 

I když jsme v tomto tutoriálu použili několik základních příkladů, můžete si snadno udělat polní den tím, že použijete tyto efekty naklonění při naklánění na jedno z našich předem připravených rozvržení nebo na svůj vlastní web.

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...

Přidat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.