Ugrađene mogućnosti transformacije Divi su se pokazali kao izuzetno koristan alat za dizajn, koji vam omogućuje da s lakoćom promijenite veličinu, zakrenete, nakosite ili pozicionirate bilo koji element na stranici. Možete čak odabrati i prebacivanje stavki u stanje lebdenja za nevjerojatne efekte lebdenja. Dakle, danas ćemo vam pokazati kako implementirati ove animacije jednim klikom.
Ova metoda zahtijeva korištenje jQueryja. Sjajna stvar kod ove tehnike je da možete koristiti ugrađene parametre dizajna Divi za stiliziranje svojstava transformacije, zatim omogućite (ili onemogućite) ta svojstva transformacije klikom miša. Ovo će otvoriti mnoštvo jedinstvenih mogućnosti za otkrivanje sadržaj skriveno pomicanjem stavki na klik, a ne na lebdenje. Također pomaže smanjiti potrebu za poznavanjem puno CSS-a.
Počnimo.
Što trebate za početak
Za ovaj vodič, sve što trebate je Divi. Za početak, idite na nadzornu ploču WordPressa. Napravite novu stranicu, dajte svojoj stranici naslov i nastavite s dizajnom na Divi builderu u prvom planu. Odaberite opciju "Izradi 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-ju, tom elementu u pozadini dodajete prilagođeni CSS. Na primjer, pomoću ugrađenih postavki Divija možete dodati svojstvo rotacije pretvorbe modulu zamućivanja tako da modul okreće duž Z osi za 20 stupnjeva.
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 pretvorbe lebdenja. Samo trebate primijeniti svojstvo transformiranja za stanje lebdenja u postavkama Divi Builder.
A kôd će izgledati ovako iza kulisa:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
Međutim, ako želite razmjestiti svojstvo pretvorbe na klik, stvari će morati raditi malo drugačije. Morat ćete unijeti neki javascript kôd da biste pokrenuli događaj klika na element (ili tekstualni modul).
S našim trenutnim primjerom, naš je glavni cilj u osnovi uključiti i isključiti svojstvo transform "transform: rotateZ (20deg)" na klik. Jednostavan način za to je stvaranje prilagođene CSS klase sa svojstvom "transformator: none!" Važno ”u postavkama stranice (ili vanjskog lista 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 (nadjačati) 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 kad kliknemo na element, klasa će se izbrisati, a svojstva transformacije (ona koja ste dodali s Divi) bit će raspoređena.
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 blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
To je sve ! Sada će svaki put kada kliknete na modul prezentacije omogućiti ili onemogućiti svojstvo transformacije koje ste dodali prezentaciji u Diviju.
Izradimo 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, držat ćemo se jednostavnog primjera reklamiranja korištenog gore. Zatim ćemo dodati dodatnu reklamu iza ovoga tako da kad god kliknete na gornju reklamu, ona će se pomaknuti s puta i otkriti sadržaj dodatna reklama koja se nalazi iza dokumenta.
Izrada modula Blurb s prednje i zadnje strane
Zatim dodajte prezentacijski modul u stupac 1.
Ažurirajte sadržaj blurb tekst da biste uključili samo naslov (uklonite zadani sadržaj tijela), zatim dodajte ikonu blurb.
Zatim ažurirajte parametre dizajna na sljedeći način:
Boja pozadine: #4c5866
Boja ikone: #ffffff
Orijentacija teksta: središte
Boja teksta
: Lagana prilagođena margina: 0px pri dnu
Prilagođeni padding: 15% na vrhu, 15% na dnu, 10% na lijevoj strani, 10% na lijevoj strani, XNUMX% na desnoj strani
Kasnije ćemo se vratiti ovom modulu, 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 stvorili.
Zatim, na drugom modulu, uklonite ikonu prezentacije (i zadanu sliku) i dodajte sadržaj tijela natrag u modul. Zatim ažurirajte parametre dizajna kako slijedi:
Boja pozadine: rgba (76,88,102,0.3)
Boja teksta: crna
Prilagođeno prilagođavanje: 20% na vrhu
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 kôd glavnom elementu:
pozicija: apsolutna! važna; prijelaz: 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 indeksom z, osigurava da modul za blurb ostane na vrhu modula za blurb iza njega. Svojstvo prijelaza zapravo je trajanje prijelaza opcija pretvorbe koje ćemo razmjestiti na 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 prednji zamagljivanje
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%
Izvor transformacije: gornje središte
Ne zaboravite da će dizajn transformacije koji vidite u ovom trenutku biti onaj pokrenut na klik. Jednostavno koristimo Divi graditelj za dobivanje željenog dizajna. U tom se slučaju prednji zametak smanjuje i centrira na njegov vrh poput ikone na koju je moguće kliknuti.
Nakon što završite, dodajte dvije CSS klase potrebne za ciljanje prednje zamućenja pomoću jQuery na sljedeći način:
CSS klasa: toggle-transform-animation transform_target
(obavezno razdvojite naziv svakog razreda 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-animacija {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.
