Ugrađene opcije transformacije divi su se pokazali kao izuzetno koristan alat za dizajn, koji vam omogućava da s lakoćom promijenite veličinu, rotirate, zakošete ili pozicionirate bilo koji element na stranici. Možete čak odabrati da stavke pretvorite u stanje lebdenja za sjajne efekte lebdenja. Dakle, danas ćemo vam pokazati kako da implementirate ove animacije jednim klikom.
Ova metoda zahtijeva korištenje jQueryja. Odlična stvar kod ove tehnike je da možete koristiti ugrađene parametre dizajna divi da biste stilizirali svojstva transformacije, a zatim omogućite (ili onemogućite) ta svojstva transformacije klikom miša. Ovo će otvoriti mnoštvo jedinstvenih mogućnosti za otkrivanje sadržaja skriveno pomicanjem stavki na klik, a ne na lebdenje. Takođe pomaže da se smanji potreba za poznavanjem mnogo CSS-a.
Počnimo.
Šta vam je potrebno za početak
Za ovaj tutorijal, sve što vam treba je divi. Za početak idite na svoju WordPress kontrolnu tablu. Kreirajte novu stranicu, dajte svojoj stranici naslov i nastavite dizajnirati na Divi builderu u prvom planu. Odaberite opciju "Izgradi od nule". Sada ste spremni za polazak!
Objašnjena osnovna ideja
Prije nego što uđem u previše detalja u ovom vodiču, provest ću vas kroz nekoliko riječi kako funkcionira ova tehnika.
Svaki put kada prilagodite element (odjeljak, liniju ili modul) u Divi-u, tom elementu u pozadini dodajete prilagođeni CSS. Na primjer, pomoću ugrađenih postavki Divija možete dodati svojstvo rotacije transformacije modulu zamućivanja tako da okreće modul duž Z osi za 20 stepeni.
Ali iza scene kreirate prilagođeni CSS koji je dodan u ovaj tekstualni modul i izgleda ovako:
.et_pb_text_0 {transform: rotateZ (20deg); }
Dovoljno jednostavno. I recimo da ste željeli dodati tu istu opciju pretvaranja lebdenja. Samo trebate primijeniti svojstvo transformiranja za stanje lebdenja u postavkama Divi Builder-a.
A kôd će izgledati ovako iza kulisa:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
Međutim, ako želite rasporediti svojstvo transform na klik, stvari će morati raditi malo drugačije. Morat ćete unijeti JavaScript kod da biste pokrenuli događaj klika na element (ili tekstualni modul).
S našim trenutnim primjerom, naš glavni cilj je u osnovi uključiti i isključiti svojstvo transformiranja "transform: rotateZ (20deg)" na klik. Jednostavan način da to napravite je stvaranje prilagođene CSS klase sa svojstvom "transformer: none!" Važno ”u postavkama stranice (ili eksterne tabele stilova). Izgledalo bi otprilike ovako.
.toggle-transform-animation {transform: none! important; }
S tim CSS-om na mjestu. Možemo dodati CSS klasu "toggle-transform-animacija" elementu blurb modula koji ima naše svojstvo transform.
Ovo će onemogućiti (nadglasiti) svojstvo transformacije i spriječiti njegovo početno aktiviranje iako mu je stil svojstva transformacije već dodan.
Sada sve što morate učiniti je aktivirati (dodati i ukloniti) ovu prilagođenu CSS klasu kada kliknete na element. Dakle, svaki put kada kliknemo na element, klasa će se izbrisati, a svojstva transformacije (ona koja ste dodali s Divi) bit će postavljena.
Evo jednostavnog primjera kako to učiniti. Prvo dodajte još jednu CSS klasu blurb modulu pod nazivom "transform_target".
Zatim idite na Divi > Opcije teme > Integracija i dodajte sljedeću jQuery skriptu u glavu tvoj blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
To je sve ! Sada će se svaki put kada kliknete na modul prezentacije aktivirati ili deaktivirati svojstvo transformiranja koje ste dodali prezentaciji u Divi.
Napravimo sada primjer tako da možete vidjeti kako to može biti korisno za vaše vlastite projekte.
Kako prebaciti svojstva transformacije na Kliknite da biste prikazali sadržaj u Divi-ju
Za ovaj primjer, zadržat ćemo se jednostavnog primjera blurb-a korištenog iznad. Zatim ćemo dodati dodatnu blurb iza ovoga tako da kad god kliknete na gornju blurb, ona će se pomaknuti s puta kako bi otkrila sadržaja dodatni natpis koji se nalazi iza dokumenta.
Izrada modula Blurb s prednje i zadnje strane
Zatim dodajte prezentacijski modul u stupac 1.
Ažurirajte sadržaja blurb da biste uključili samo naslov (uklonite zadani sadržaj tijela), a zatim dodajte ikonu blurb.
Zatim ažurirajte parametre dizajna na sljedeći način:
Boja pozadine: #4c5866
Boja ikone: #ffffff
Orijentacija teksta: centar
Boja teksta
: Lagana prilagođena marža: 0px na dnu
Custom padding: 15% na vrhu, 15% na dnu, 10% na lijevoj strani, 10% na lijevoj strani
Na ovaj modul ćemo se vratiti kasnije, ali za sada moramo stvoriti naš drugi modul Blurb koji će služiti kao "return" modul s dodatnim sadržajem.
Da biste to učinili, duplicirajte prezentacijski modul koji ste upravo kreirali.
Zatim, na drugom modulu, uklonite ikonu prezentacije (i zadanu sliku) i dodajte sadržaj tijela natrag u modul. Zatim ažurirajte parametre dizajna na sljedeći način:
Boja pozadine: rgba (76,88,102,0.3)
Boja teksta: Crna
Prilagođeno prilagođavanje: 20% vrh
Postavite modul prije Sažetka
Sada kada su naša dva blurba oblikovana, moramo se vratiti na naš prednji (gornji) blurb i postaviti ga iznad stražnjeg (donjeg) blurba. Da bismo to učinili, dat ćemo mu apsolutni položaj s visinom od 100% i širinom od 100%.
Prvo otvorite postavke gornjeg / prednjeg prezentacijskog modula i ažurirajte sljedeće:
visina: 100%;
širina: 100%;
Zatim dodajte sljedeći prilagođeni CSS kod glavnom elementu:
pozicija: apsolutno! tranzicija: svi .5;
Zatim ažurirajte z indeks na sljedeći način:
Z indeks: 2000
Apsolutni položaj, u kombinaciji sa 100% visine i širine i z indeksom, osigurava da blurb modul ostane na vrhu blurb modula iza njega. Svojstvo prijelaza zapravo je trajanje prijelaza opcija pretvorbe koje ćemo razmjestiti pri sljedećem kliku. A "pokazivač: pokazivač" je da promijeni kursor tako da se korisniku čini da element može kliknuti.
Dodavanje opcija transformacije i prilagođenih klasa u prednju zamućenje
Sada je vrijeme da dodamo svoja svojstva pretvorbe u prednji blurb. Zatim ćemo dodati prilagođene CSS klase potrebne za naš jQuery za prebacivanje ovih svojstava na klik.
Pod parametrima dizajna prednjeg zamućenja dodajte sljedeća svojstva transformacije:
X i y skala transformacije: 20%
Porijeklo transformacije: gornji centar
Ne zaboravite da će dizajn transformacije koji vidite u ovom trenutku biti onaj pokrenut na klik. Jednostavno koristimo Divi graditelj da bismo dobili željeni dizajn. U ovom slučaju, prednja se zamućuje i centrira na vrh nje poput ikone na koju je moguće kliknuti.
Nakon što završite, dodajte dvije CSS klase potrebne za ciljanje prednjeg zamućenja pomoću jQuery na sljedeći način:
CSS klasa: toggle-transform-animation transform_target
(obavezno odvojite svako ime klase s razmakom)
Zatim dodajte sljedeći prilagođeni isječak CSS koda koji će se koristiti za omogućavanje i onemogućavanje svojstava transformacije pomoću jQuery.
.toggle-transform-animation {transformiraj: nema! važno; }
Primijetit ćete da su prethodno dodana svojstva transformacije zamućenja onemogućena jer je na nju primijenjena ova klasa.
Sada idite na Divi> Opcije teme> Integracija i dodajte sljedeću jQuery skriptu u glavu bloga:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Da vidimo konačni rezultat.
Ovim primjerom možete stvoriti još impresivnije dizajne. Ne ustručavajte se podijeliti svoje mišljenje u odjeljku za komentare.
