Želite li dodati efekt nagiba s Divi na bilo kojem elementu vaše stranice?
Dodavanje efekata lebdenja i nagiba vašem web stranica je jedan od onih zabavnih i privlačnih načina da dovedete svoje web stranica Divi. Obično ova vrsta dizajna zahtijeva dodatak ili napredniji kod. No, ovaj je proces mnogo lakši korištenjem Tilt.js (blagi učinak lebdenja nagiba za jQuery). Pomoću Tilt.js možete jednostavno primijeniti efekte nagiba lebdenja na bilo što u nekoliko minuta.
U ovom vodiču pokazat ćemo vam kako dodati efekte nagiba lebdenja bilo kojem elementu Divi. Koristeći kombinaciju jQuery tilt.js isječaka i Divi buildera, pokazat ćemo vam kako dodati sjajne efekte nagiba lebdenja na sliku, stupac modula, redak itd.
Čak ćemo vam pokazati kako dodati nevjerojatne 3D efekte paralakse.
Krenimo!
pregled
Evo kratkog pregleda rezultata koji ćemo dobiti u ovom vodiču.
Vidi također: Divi: Kako otkriti sadržaj kada zadržite pokazivač iznad razdjelnika odjeljaka
Što trebate za početak
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Dodajte efekte nagiba pri lebdenju bilo kojeg elementa u Diviju
Dodajte Tilt Hover efekt Divi modulima
Započnimo dodavanjem retka s tri stupca zadanom redovnom odjeljku.
Dodajte modul slike
U prvom stupcu dodajte modul Image.
Napomena: Možete koristiti bilo koji modul po svom izboru. To uopće ne mora biti Image modul.
Učitajte sliku po svom izboru.
Dodajte klasu modula slike
Ispod kartice napredan, dodajte sljedeću CSS klasu:
- CSS klasa: et-js-tilt
Ova će se klasa kasnije koristiti kao selektor za našu funkciju nagiba.
Kopirajte i zalijepite prethodni modul slike
Zatim kopirajte modul Image i zalijepite po jedan u svaki od dva preostala stupca.
Duplicirane slike možete zamijeniti novima ako želite. Samo provjerite pripada li svaki modul slike CSS klasi “et-js-tilt”.
Dodajte JQuery biblioteku "tilt.js"
Za dodavanje knjižnice nagnuti.js i isječak koda potreban za iskrivljavanje naših slika, koristit ćemo modul koda.
Prvo dodajte novi red jedan stupac ispod postojećeg retka.
Zatim dodajte modul koda u novi redak.
Zatim moramo pristupiti biblioteka tilt.js dodavanjem skripte koja uvozi tilt.js iz njihovog CDN-a (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Zalijepite sljedeću skriptu u okvir koda.
Koristite sljedeći src kod u oznaci skripte za uvoz biblioteke:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"Trebalo bi izgledati ovako:
Važno je uvoziti nagnuti.js prije dodavanja koda koji će ga koristiti. Dakle, nakon što scenarij ukazuje na nagnuti.js, dodajte potrebne oznake skripte da omotate JQuery koji trebamo dodati. Zatim zalijepite sljedeći JQuery između oznaka skripte.
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Imajte na umu da je funkcija tilt() unutar if naredbe koja će se pokrenuti kada je širina preglednika veća od 980px. Ovo će osigurati da se učinak pojavi samo na stolnom računalu.
Evo rezultata.
Liniji je dodan efekt lebdenja nagiba
Kao što smo već spomenuli, možete dodati ovaj efekt nagiba lebdenja bilo kojem Divi elementu. Ovo uključuje cijelu liniju.
Osim toga, možete dodati efekt nagiba u red dok zadržavate efekte nagiba za svaki od modula unutar retka.
Evo kako.
Duplicirajte liniju i dodajte jedinstvenu CSS klasu u liniju
Duplicirajte postojeći redak slika, zatim otvorite postavke dupliciranog retka. Ispod kartice napredan, dajte retku jedinstvenu CSS klasu kako slijedi:
- CSS klasa: et-row-js-tilt
Dodajte jQuery
Zatim dodajte sljedeći jQuery ispod prethodne skew funkcije da primijenite zasebnu skew funkciju na liniju.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Imajte na umu da smo za ovaj efekt nagiba smanjili ljestvicu na 1 i povećali vrijednost perspektive tako da je nagib suptilniji.
Evo rezultata.
Primijetite kako red ima značajku nagiba koja se aktivira kada prijeđete pokazivačem iznad retka, a svaki od modula slike također ima isti učinak nagiba koji smo prethodno dodali. Ovako možete primijeniti ugniježđene instance efekta nagiba.
Dodajte Tilt Hover efekt stupcu s nekoliko Divi modula
U nekim slučajevima korisno je dodati efekt zakrivljenosti stupcu modula. To će vam omogućiti da dizajnirate više modula u stupcu s Divi, a zatim sve te elemente postavite pod kutom kao jednu jedinicu.
Da bismo vam dali primjer kako to učiniti, dodat ćemo efekt nagiba pri lebdenju u stupac koji sadrži modul slike, modul teksta i modul gumba.
Dodajte novi redak
Za početak izradite novi red sa sljedećom strukturom stupaca:
Dodajte modul slike
Unutar stupca 2 (srednji stupac) dodajte novi modul Image.
Učitajte sliku u modul.
Postavite sliku u središte.
Dodajte tekstualni modul
Ispod modula slike dodajte tekstualni modul sa sljedećim H2 zaglavljem:
<h2>Local Organic</h2>
Zatim ažurirajte stilove naslova H2 na sljedeći način:
- Font: Berkshire Swash
- Poravnanje teksta: centrirano
- Boja teksta: #000000
- Veličina: 60px
- Visina linije: 1,2 em
Dodaj modul gumba
Ispod modula Text dodajte modul Button.
Ažurirajte tekst gumba da glasi "Saznajte više..."
Ažurirajte postavke personalizacije na sljedeći način:
- Poravnanje gumba: središte
- Koristite prilagođene stilove za gumb
- Veličina teksta gumba: 18px
- Boja teksta: #fff
- Pozadina gumba: #000
- Širina obruba gumba: 0 piksela
- Radijus obruba: 100 px
- Font gumba: živi pijesak
- Težina fonta: Podebljano
- Razmak (gornji i donji dio): 16 px
- Razmak (lijevo i desno): 30px
- Box Shadow: pogledajte snimak zaslona
Parametri stupca
Nakon što su sva tri modula dovršena, otvorite postavke za nadređeni stupac tih modula (stupac 2) i ažurirajte sljedeće:
- Pozadina: #f5cee6
- Razmak (gornji i donji dio): 50 px
- Razmak (lijevo i desno): 20px
Dodavanje CSS klase stupcu
Pod naprednom karticom dodajte sljedeću CSS klasu:
- CSS klasa: et-column-js-tilt
Dodan jQuery za primjenu efekta nagiba na stupac
Da bismo stupcu dodali efekt zakrivljenosti, možemo dodati još jedan sličan jQuery isječak koji cilja na stupac CSS Class.
Zalijepite sljedeći isječak koda ispod prethodnog isječka koda ciljajući liniju.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Evo konačnog rezultata.
Dodan 3D efekt paralakse unutarnjim dijelovima
Za napredniji učinak lebdenja nagiba, možemo dodati 3D efekt paralakse internim modulima stupaca.
Koristeći kombinaciju perspektive i transform:translateZ(), možemo učiniti da se svaki od modula stupca pojavi u 3D prostoru kada je aktivan efekt nagiba pri lebdenju.
Evo kako.
Dupliciraj prethodni redak
Najprije duplicirajte prethodni red s efektom zakrivljenosti dodanim srednjem stupcu.
Dodajte jednu klasu stupca
Zatim ažurirajte srednji stupac (stupac 2) jedinstvenom CSS klasom na sljedeći način:
- CSS klasa: et-column-js-tilt-3d
Prilagođeni CSS
Kako biste osigurali da interni moduli sačuvaju 3D efekt, dodajte sljedeći prilagođeni CSS elementu glavnog stupca:
transform-style: preserve-3d;
Dodajte jQuery i CSS
Zatim dodajte još neke jQuery isječke ispod prethodnog isječka funkcije skew koji cilja stupac na sljedeći način:
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");
});Ovaj jQuery dodaje još jednu osnovnu funkciju nagiba stupcu, baš kao i prethodni primjer.
.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);
}
Sada pogledajte krajnji rezultat. Primijetite kako se tri modula pojavljuju u 3D prostoru dok se okreću tijekom efekta nagiba.
Pročitajte također: Divi: Kako otkriti sadržaj kada zadržite pokazivač iznad razdjelnika odjeljaka
Konačni rezultati
Evo još jednog pogleda na krajnje rezultate za naše primjere.
Preuzmite DIVI sada!!!
Zaključak
Efekti nagiba lebdenja koje nudi Tilt.js su stvarno zabavni za eksperimentiranje.
Iako smo upotrijebili nekoliko osnovnih primjera u ovom vodiču, možete jednostavno provesti dan na terenu primjenom ovih efekata nagiba lebdenja na jedan od naših unaprijed napravljenih izgleda ili vlastito web mjesto.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
