Želite li dizajnirati pozadinu divi animirani prilikom pomicanja po stranici zahvaljujući maskama i šarama? Ovaj tutorijal je za vas...
Dodavanje animacije pomicanja u divi a njegove pozadinske maske i uzorci su koristan savjet za dizajn koji može udahnuti novi život vašim dizajnima pozadine. site Web.
U ovom vodiču ćemo vam pokazati kako kreirati i animirati maske i pozadinske uzorke koristeći opcije pomicanja divi (nije potreban prilagođeni kod).
Da bismo to učinili, kreirat ćemo plutajući pozadinski sloj koristeći liniju divi koje ćemo koristiti za animiranje maski i pozadinskih uzoraka kada korisnik skroluje kroz dio sadržaja.
Mislimo da će vam se svidjeti rezultat.
Počnimo!
pregled
Evo kratke ilustracije kako će izgledati animacija pozadine za ovaj vodič.
Koncept
Koncept ovog dizajna ne bi trebao biti previše težak za shvatiti. Počinjemo s dijelom koji ima pozadinu s gradijentom.
Zatim kreiramo liniju koja je pozicionirana (apsolutno) tako da u potpunosti pokriva sekciju (kao preklapanje). U red možemo dodati uzorak pozadine.
Zatim možemo dodati masku pozadine koloni.
Zatim dodajemo efekti skrolovanja u red i kolonu (poput razmjera i rotacije) koji će animirati uzorak i masku zasebno u pozadini odjeljka.
Kada sakrijemo prelijevanje sekcije, sve što vidimo je animacija sadržana u sekciji.
Počnimo kreiranjem stranice sa Divi Builder-om
Da biste započeli, morat ćete učiniti sljedeće:
Sa WordPress kontrolne table idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite upotreba divi graditelj
Zatim kliknite na Start Building (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi-ju.
Pročitajte takođe: Divi: Kako koristiti "Gradient Builder" da uljepšate svoje slike
Kako napraviti animirane pozadinske maske i uzorke za pomicanje pomoću Divi-a
Dizajn pozadine odjeljka
Prvo ćemo preskočiti kreiranje linije i skočiti pravo na uređivanje postojećeg zadanog odjeljka u alatu za pravljenje tema.
Da bi naš dizajn pozadine ispunio pretraživač, moramo dodati vertikalnu visinu sekciji. Jednostavan način da to učinite je dodavanje minimalne visine sekciji.
Otvorite postavke odjeljka. Ispod kartice dizajn, ažurirajte minimalnu visinu i uklonite padding na sljedeći način:
- Margina: 80 vh (gore i dno)
- Padding: 0px (vrh i dno)
Dizajniranje gradijenta pozadine za sekciju
Sada možemo dodati prilagođeni pozadinski gradijent sekciji.
Da biste dodali prve stanice gradijenta, provjerite jesu li postavke odjeljka otvorene ispod kartice sadržaj. Zatim odaberite karticu Gradijent pozadine i kliknite da dodate novi gradijent. Ovo će dodati dvije zadane boje gradijenta. Dodajte sljedeće granične prelaze s bojom i položajem na sljedeći način:
- Gradijent zaustavlja:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Zatim promijenite smjer linearnog gradijenta:
- Smjer gradijenta: 270 stepeni
Dodajte redove u odjeljak
Sada kada je naš odeljak na mestu, dodajte red sa jednom kolonom u sekciju. Ova linija će se koristiti za našu masku u pozadini i animaciju pomicanja uzorka.
Zatim, duplirajte liniju koju ste upravo kreirali. Ovaj drugi (duplirani) red će se koristiti za naše sadržaja kao što biste inače radili.
Sada biste trebali imati gornju liniju za animaciju skrolovanja u pozadini i liniju za sadržaja normalno.
Prilagodite liniju
Sada kada imamo spreman gradijent pozadine odjeljka, možemo skrenuti pažnju na liniju koju ćemo koristiti za našu animaciju pozadine na pomicanju.
Otvorite postavke linije. Ispod kartice Napredan, ažurirajte sljedeće:
- Pozicija: Apsolutna
Ovo će omogućiti da se linija preklapa odeljak bez zauzimanja stvarnog prostora u dokumentu.
Sada sve što treba da uradimo je da ažuriramo visinu i širinu tako da obuhvataju punu širinu i visinu sekcije. Ovo će stvoriti sloj koji nam je potreban i naš drugi sloj dizajna pozadine.
Ispod kartice dizajn, ažurirajte opcije veličine na sljedeći način:
- Visina kolone Aquasize: DA
- Širina: 100%
- Maksimalna širina: 100%
- Visina: 100%
- Padding: 0px (vrh i dno)
Sada možda nećete moći vidjeti liniju, ali ona sada savršeno pokriva pozadinu cijelog odjeljka.
Kreirajte pozadinski uzorak za liniju
U ovom primjeru ćemo dodati uzorak konfete kao pozadinu linije.
Otvorite postavke linije. Pod opcijom pozadina, odaberite karticu Uzorak pozadine i ažurirajte sljedeće:
- Uzorak pozadine: Konfeti
- Uzorak:
- Boja: #f6bef7
- Veličina: prilagođena veličina
- Širina: 35 vw
- Ponavljanje Porijeklo: centar
NAPOMENA : Upotreba VW jedinice za dužinu osigurava da će se uzorak skalirati s pretraživačem, održavajući dizajn dosljednim i prilagodljivim.
Dodajte efekte skrolovanja na liniju
Sada kada je naš uzorak pozadine na mjestu, možemo dodati efekte pomicanja na liniju.
Idite na karticu Napredan. Pod opcijom Efekti pomicanja, ažurirajte sljedeće:
Odaberite karticu Horizontal-Motion i ažurirajte sljedeće:
- Omogući horizontalno kretanje: DA
- Početni pomak: 0,5 (pri 0%)
- Srednji pomak: 0 (od 40% do 60%)
- Završni pomak: -0,5 (na 100%)
Ovo će pomjeriti pozadinski uzorak linije počevši od 50 piksela lijevo i završavajući 50 piksela udesno.
Odaberite karticu "Scale Up and Down" i ažurirajte sljedeće:
- Omogući povećanje i smanjivanje veličine: DA
- Početna skala: 150% (na 0%)
- Srednja skala: 100% (od 40% do 60%)
- Krajnja skala: 150% (na 100%)
Ovo će skalirati uzorak pozadine reda prilikom pomicanja.
Odaberite karticu « obrtni » i ažurirajte sljedeće:
- Omogući rotiranje: DA
- Početna rotacija: 10 stepeni (pri 0%)
- Srednja rotacija: 0 stepeni (od 40% do 60%)
- Završna rotacija: -10 stepeni (na 100%)
KLJUČNI SAVJET: Morate svesti rotaciju na minimum ili rizikujete da pokažete praznine tamo gdje se linija ne proteže dalje od sekcije. Dobro pravilo je povećati skalu ako želite povećati rotaciju. Ovo će omogućiti da se linija okrene preko sekcije bez otkrivanja ivica.
Dodajte pozadinsku masku sa efektima pomicanja u kolonu
Kada je naš red završen, spremni smo da dodamo masku pozadine sa efektima pomeranja u kolonu istog reda. Za početak, dodajmo masku pozadine.
Da biste to učinili, otvorite postavku kolone. Ispod kartice Pozadinska maska, ažurirajte sljedeće:
- Maska: Layer Blob
- Boja: #ffffff
- Transformacija maske: Horizontalno okretanje, inverzija
Dodajte efekte pomicanja u kolonu
Sada kada je naša maska pozadine na mjestu, možemo dodati efekte pomicanja u kolonu. Imajte na umu da kolona već ima efekte pomicanja naslijeđene od roditeljskog reda.
Sve što ćemo uraditi je rotirati kolonu u suprotnom smjeru od reda kako bismo postigli više razdvajanja maske i uzorka za vrijeme trajanja pomicanja.
Idite na karticu Napredan. Pod opcijama Efekti pomicanja, odaberite karticu Rotating i ažurirajte sljedeće:
- Omogući rotiranje: DA
- Početna rotacija: -15 stepeni (pri 0%)
- Srednja rotacija: 0 stepeni (od 40% do 60%)
- Završna rotacija: 15 stepeni (na 100%)
Sakrij prelijevanje odjeljka
Trenutno, linija ostaje vidljiva kad god pomicanje uzrokuje da se proteže izvan sekcije.
Da bismo ovo očistili, moramo sakriti prelijevanje odjeljka. Da biste to učinili, otvorite postavke odjeljka. Ispod kartice Napredan, ažurirajte opcije vidljivosti na sljedeći način:
- Horizontalni preliv: skriven
- Vertikalni preliv: skriven
Sada izgleda bolje.
Vidi također: Divi: 12 kombinacija maski i pozadinskih uzoraka
Dodavanje sadržaja u liniju kreiranu za ovu svrhu
U ovom trenutku, maska pozadine i animacija pomicanja uzorka su završeni. Sve što trebamo učiniti je dodati sadržaj koji želimo u red koji smo ranije kreirali za sadržaj.
Za ovaj primjer, dodali smo lažni naslov kako bismo mogli vidjeti kako će pozadinska animacija izgledati sa statičnim tekstom.
Konačni rezultat
Pogledajmo krajnji rezultat našeg dizajna.
Preuzmite DIVI sada!!!
zaključak
Nevjerovatno je kako je lako stvoriti tako lijepe pozadine s Divi-jevim opcijama pozadine. Osim toga, dodavanje animacije s Divi efektima pomicanja donosi novi život ovim dizajnima.
Za drugačiji izgled, možete isprobati različite maske i uzorke na svakom sloju. Ako želite više inspiracije o tome kako koristiti maske i šare pozadinu, pogledajte ove 12 pozadinskih maski i kombinacija uzoraka
Nadamo se da će vas ovaj vodič inspirisati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
