Vstavané možnosti transformácie divi sa ukázali ako mimoriadne užitočný dizajnový nástroj, ktorý vám umožňuje jednoducho meniť veľkosť, otáčať, skosiť alebo umiestniť akýkoľvek prvok na stránke. A môžete sa dokonca rozhodnúť zmeniť položky do stavu vznášania pre úžasné efekty vznášania. Dnes vám teda ukážeme, ako nasadiť tieto animácie jedným kliknutím.
Táto metóda vyžaduje použitie jQuery. Skvelá vec na tejto technike je, že môžete použiť vstavané konštrukčné parametre divi upravte vlastnosti transformácie a potom kliknutím myši aktivujte (alebo deaktivujte) tieto vlastnosti transformácie. To vám otvorí množstvo jedinečných možností na odhalenie obsah skryté presunutím položiek na kliknutie a nie na premiestnenie. A tiež pomáha znižovať potrebu poznať veľa CSS.
Začnime.
Čo potrebujete, aby ste začali
Pre tento tutoriál potrebujete iba divi. Ak chcete začať, prejdite na svoj informačný panel WordPress. Vytvorte novú stránku, pomenujte svoju stránku a pokračujte v navrhovaní pomocou nástroja Divi builder v popredí. Vyberte možnosť „Vytvoriť od začiatku“. Teraz ste pripravení ísť!
Vysvetlená základná myšlienka
Predtým, ako sa v tomto tutoriále uvediem príliš podrobne, niekoľkými slovami vás prevediem tým, ako táto technika funguje.
Zakaždým, keď v Divi upravujete prvok (oddiel, riadok alebo modul), pridáte k tomuto prvku na pozadí vlastné CSS. Napríklad pomocou vstavaných nastavení Divi môžete pridať vlastnosť transformácie otáčania k modulu blurdu tak, aby modul otáčal pozdĺž osi Z o 20 stupňov.
Za scénami však vytvoríte vlastný CSS, ktorý sa pridá do tohto textového modulu a vyzerá takto:
.et_pb_text_0 {transform: rotateZ (20deg); }
Dosť jednoduché. A povedzme, že ste chceli pridať tú istú možnosť transformácie kurzora myši. Musíte len použiť vlastnosť transformácie na stav vznášania sa v nastaveniach Divi Builder.
A kód bude vyzerať takto v zákulisí:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
Ak však chcete nasadiť vlastnosť transformácie po kliknutí, bude to musieť fungovať trochu inak. Ak chcete spustiť udalosť kliknutia na prvok (alebo textový modul), budete musieť zadať kód JavaScriptu.
V našom súčasnom príklade je naším hlavným cieľom v podstate zapnúť a vypnúť vlastnosť transformácie „transform: rotateZ (20deg)“ po kliknutí. Jednoduchý spôsob, ako to urobiť, je vytvoriť si vlastnú triedu CSS s vlastnosťou „transformátor: žiadny!“ Dôležité “v nastaveniach stránky (alebo externej šablóny štýlov). Vyzeralo by to asi takto.
.toggle-transform-animation {transform: none! important; }
S zavedeným CSS. Môžeme pridať triedu CSS „toggle-transform-animation“ do prvku modulu blurb, ktorý má našu vlastnosť transformácie.
Tým sa deaktivuje (prepíše) vlastnosť transform a zabráni sa jej počiatočnej aktivácii, aj keď do nej už bol pridaný štýl vlastnosti transform.
Teraz všetko, čo musíte urobiť, je aktivovať (pridať a odstrániť) túto vlastnú triedu CSS, keď kliknete na prvok. Takže zakaždým, keď klikneme na prvok, trieda bude odstránená a budú nasadené transformačné vlastnosti (tie, ktoré ste pridali pomocou Divi).
Tu je jednoduchý príklad, ako to urobiť. Najskôr pridajte ďalšiu triedu CSS do modulu reklama s názvom „transform_target“.
Ďalej prejdite na Divi > Možnosti témy > Integrácia a pridajte nasledujúci skript jQuery do hlavy váš blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
To je všetko ! Teraz zakaždým, keď kliknete na prezentačný modul, sa aktivuje alebo deaktivuje vlastnosť transformácie, ktorú ste pridali do prezentácie v Divi.
Teraz vytvorme príklad, aby ste videli, ako by to mohlo byť užitočné pre vaše vlastné projekty.
Ako prepnúť vlastnosti transformácie Kliknutím zobrazíte obsah v časti Divi
V tomto príklade sa budeme držať jednoduchého príkladu reklamného textu použitého vyššie. Ďalej za to pridáme ďalší reklamný text, takže vždy, keď kliknete na horný reklamný text, posunie sa z cesty a odhalí obsah dodatočná reklama sediaca za dokumentom.
Vytvorenie Blurb modulov spredu a zozadu
Potom pridajte prezentačný modul do stĺpca 1.
Aktualizujte obsah rozmazať text, aby obsahoval iba nadpis (odstrániť predvolený obsah tela), potom pridajte ikonu reklamného rozpisu.
Potom aktualizujte parametre návrhu nasledovne:
Farba pozadia: #4c5866
Farba ikony: #ffffff
Orientácia textu: stred
Farba textu
: Ľahká vlastná marža: 0px dole
Vlastné čalúnenie: 15% hore, 15% dole, 10% zľava, 10% vpravo
K tomuto modulu sa vrátime neskôr, ale zatiaľ musíme vytvoriť náš druhý modul Blurb, ktorý bude slúžiť ako modul „návratu“ s ďalším obsahom.
Ak to chcete urobiť, duplikujte práve vytvorený prezentačný modul.
Potom na druhom module odstráňte ikonu prezentácie (a predvolený obrázok) a pridajte späť obsah tela späť do modulu. Potom aktualizujte parametre návrhu takto:
Farba pozadia: rgba (76,88,102,0.3)
Farba textu: Čierna
Vlastné polstrovanie: 20% top
Umiestnite modul pred zhrnutie
Teraz, keď sú naše dve rozmazané žiarovky štylizované, sa musíme vrátiť späť k nášmu prednému (hornému) obrysu a umiestniť ho nad zadný (spodný) obrys. Za týmto účelom mu dáme absolútnu pozíciu s výškou 100% a šírkou 100%.
Najskôr otvorte nastavenia prezentačného modulu v hornej / prednej časti a aktualizujte nasledujúce informácie:
výška: 100%;
width: 100%;
Potom pridajte do hlavného prvku nasledujúci vlastný kód CSS:
pozícia: absolútna! prechod: všetky .5;
Potom aktualizujte index z takto:
Z index: 2000
Absolútna poloha v kombinácii so 100% výšky a šírky a indexom z zaisťuje, že reklamný modul zostane navrchu reklamného modulu za ním. Vlastnosť prechodu je v skutočnosti doba prechodu možností transformácie, ktoré nasadíme pri ďalšom kliknutí. A „cursor: pointer“ má zmeniť kurzor tak, aby sa na používateľa javilo, že na používateľa je možné kliknúť.
Pridanie volieb transformácie a vlastných tried do predného bloku
Teraz je ten správny čas pridať do prednej reklamy naše transformačné vlastnosti. Potom pridáme vlastné triedy CSS potrebné na to, aby náš jQuery tieto vlastnosti po kliknutí prepínal.
V rámci parametrov návrhu prednej masky pridajte nasledujúce vlastnosti transformácie:
Stupnica transformácie X a y: 20%
Počiatok transformácie: horný stred
Pamätajte, že návrh transformácie, ktorý uvidíte v tomto okamihu, bude ten, ktorý sa spustí po kliknutí. Jednoducho využijeme výhodu nástroja Divi builder na získanie požadovaného dizajnu. V takom prípade sa predná reklama zmenší a stane sa v jej strede stred ako ikona, na ktorú je možné kliknúť.
Po dokončení pridajte dve triedy CSS potrebné na zacielenie predného bloku pomocou jQuery takto:
Trieda CSS: toggle-transform-animation transform_target
(nezabudnite oddeliť každý názov triedy medzerou)
Potom pridajte nasledujúci vlastný útržok kódu CSS, ktorý sa použije na povolenie a zakázanie transformačných vlastností pomocou jQuery.
.toggle-transform-animation {transformácia: žiadny! dôležité; }
Zistíte, že predtým pridané vlastnosti transformácie blurbu boli zakázané, pretože na túto triedu bola použitá.
Teraz choďte na Divi> Možnosti témy> Integrácia a do hlavy blogu pridajte nasledujúci skript jQuery:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Pozrime sa na konečný výsledok.
Tento príklad môžete použiť na vytvorenie ešte pôsobivejších návrhov. Neváhajte a podeľte sa o svoj názor v sekcii komentárov.
