Želite li dizajnirati pozadinu Divi animirani prilikom pomicanja stranice zahvaljujući maskama i uzorcima? Ovaj vodič je za vas...
Dodavanje animacije pomicanja u Divi a njegove pozadinske maske i uzorci koristan su savjet za dizajn koji može udahnuti novi život vašim dizajnom pozadine. web stranica.
U ovom vodiču pokazat ćemo vam kako stvoriti i animirati maske i pozadinske uzorke pomoću opcija pomicanja Divi (nije potreban prilagođeni kod).
Da bismo to učinili, stvorit ćemo lebdeći pozadinski sloj pomoću linije Divi koje ćemo koristiti za animiranje maski i pozadinskih uzoraka kada se korisnik pomiče kroz dio sadržaj.
Mislimo da će vam se svidjeti rezultat.
Krenimo!
pregled
Evo kratke ilustracije kako će izgledati animacija pozadinskog pomicanja za ovaj vodič.
Koncept
Koncept ovog dizajna ne bi trebao biti previše težak za shvatiti. Počinjemo s dijelom koji ima gradijentnu pozadinu.
Zatim stvaramo liniju koja je postavljena (apsolutno) tako da potpuno prekriva odjeljak (poput preklapanja). Redu možemo dodati pozadinski uzorak.
Zatim možemo dodati masku pozadine stupcu.
Zatim dodajemo efekti pomicanja na redak i stupac (poput mjerila i rotacije) koji će odvojeno animirati uzorak i masku u pozadini odjeljka.
Kada sakrijemo preljev odjeljka, sve što vidimo je animacija sadržana unutar odjeljka.
Počnimo s izradom stranice s Divi Builderom
Da biste započeli, morat ćete učiniti sljedeće:
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristiti Divi Graditelj
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Pročitajte također: Divi: Kako koristiti "Gradient Builder" za uljepšavanje vaših slika
Kako stvoriti animirane pomične pozadinske maske i uzorke s Divi
Dizajn pozadine odjeljka
Prvo ćemo preskočiti stvaranje retka i odmah prijeći na uređivanje postojećeg zadanog odjeljka u alatu za izradu tema.
Kako bi naš dizajn pozadine ispunio preglednik, moramo dodati okomitu visinu odjeljku. Jednostavan način da to učinite je dodavanje minimalne visine odjeljku.
Otvorite postavke odjeljka. Ispod kartice dizajnažurirajte minimalnu visinu i uklonite ispunu na sljedeći način:
- Margina: 80 vh (gornja i donja)
- Ispod: 0px (gornje i donje)
Dizajniranje pozadinskog gradijenta za odjeljak
Sada možemo dodati prilagođeni gradijent pozadine u odjeljak.
Da biste dodali prve granice gradijenta, provjerite jesu li postavke odjeljka otvorene pod karticom Sadržaj. Zatim odaberite karticu Gradijent pozadine i kliknite za dodavanje novog gradijenta. Ovo će dodati dvije zadane boje gradijenta. Dodajte sljedeće granice gradijenta s bojom i položajem kako slijedi:
- Gradijent zaustavljanja:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Zatim promijenite smjer linearnog gradijenta:
- Smjer gradijenta: 270 stupnjeva
Dodajte retke u odjeljak
Sada kada je naš odjeljak na mjestu, dodajte redak s jednim stupcem u odjeljak. Ova će se linija koristiti za našu masku pozadine i animaciju pomicanja uzorka.
Zatim duplicirajte liniju koju ste upravo stvorili. Ovaj drugi (duplicirani) redak koristit će se za naš sadržaj kao što biste inače.
Sada biste trebali imati gornji redak za pozadinsku animaciju pomicanja i redak za sadržaj normalno.
Prilagodite liniju
Sada kada imamo spreman pozadinski gradijent odjeljka, možemo obratiti pažnju na liniju koju ćemo koristiti za našu animaciju pozadine na pomicanju.
Otvori postavke linije. Ispod kartice napredanažurirajte sljedeće:
- Pozicija: Apsolutna
To će omogućiti da linija preklapa odjeljak bez zauzimanja stvarnog prostora u dokumentu.
Sada sve što trebamo učiniti je ažurirati visinu i širinu tako da obuhvaćaju punu širinu i visinu odjeljka. Ovo će stvoriti sloj koji nam je potreban i naš drugi sloj dizajna pozadine.
Ispod kartice dizajnažurirajte opcije veličine na sljedeći način:
- Aquasize visine stupaca: DA
- Širina: 100%
- Maksimalna širina: 100%
- Visina: 100%
- Ispod: 0px (gornje i donje)
Sada možda nećete moći vidjeti liniju, ali ona sada savršeno pokriva pozadinu cijelog odjeljka.
Napravite pozadinski uzorak za liniju
U ovom primjeru ćemo dodati uzorak Konfete kao pozadina linije.
Otvori postavke linije. Pod opcijom pozadina, odaberite karticu Pozadinski uzorak i ažurirajte sljedeće:
- Pozadinski uzorak: konfeti
- Uzorak:
- Boja: #f6bef7
- Veličina: prilagođena veličina
- Širina: 35 vw
- Ponavljanje podrijetla: centar
NAPOMENA : Korištenje VW jedinice duljine osigurava da će se uzorak skalirati s preglednikom, održavajući dizajn dosljednim i osjetljivim.
Dodajte efekte pomicanja liniji
Sada kada je naš pozadinski uzorak postavljen, možemo liniji dodati efekte pomicanja.
Idite na karticu napredan. Pod opcijom Pomaknite se efektiažurirajte sljedeće:
Odaberite karticu Horizontalno kretanje i ažurirajte sljedeće:
- Omogući vodoravno kretanje: DA
- Početni pomak: 0,5 (na 0%)
- Srednji pomak: 0 (od 40% do 60%)
- Završni pomak: -0,5 (na 100%)
Ovo će pomaknuti linijski pozadinski uzorak počevši 50 piksela ulijevo i završavajući 50 piksela udesno.
Odaberite karticu "Skala gore i dolje" i ažurirajte sljedeće:
- Omogući skaliranje gore i dolje: DA
- Početna ljestvica: 150% (na 0%)
- Srednja ljestvica: 100% (od 40% do 60%)
- Završna ljestvica: 150% (na 100%)
Ovo će skalirati pozadinski uzorak retka prilikom pomicanja.
Odaberite karticu « Rotacioni » i ažurirajte sljedeće:
- Omogući rotiranje: DA
- Početna rotacija: 10 stupnjeva (na 0%)
- Srednja rotacija: 0 stupnjeva (od 40% do 60%)
- Završna rotacija: -10 stupnjeva (pri 100%)
KLJUČNI SAVJET: Morate svesti rotaciju na minimum ili riskirate pokazivanje praznina tamo gdje linija ne prelazi dionicu. Dobro pravilo je povećati ljestvicu ako želite povećati rotaciju. To će omogućiti da se linija okreće preko dijela bez izlaganja rubova.
Dodajte pozadinsku masku s efektima pomicanja stupcu
Nakon što je naš red dovršen, spremni smo za dodavanje pozadinske maske s efektima pomicanja u stupac istog retka. Za početak, dodajmo pozadinsku masku.
Da biste to učinili, otvorite postavku stupca. Ispod kartice Maska za pozadinuažurirajte sljedeće:
- Maska: Layer Blob
- Boja: #ffffff
- Transformacija maske: vodoravno okretanje, inverzija
Dodajte efekte pomicanja stupcu
Sada kada je naša pozadinska maska postavljena, stupcu možemo dodati efekte pomicanja. Imajte na umu da stupac već ima efekte pomicanja naslijeđene od nadređenog retka.
Sve što ćemo učiniti je rotirati stupac u smjeru suprotnom od retka kako bismo postigli više odvajanja maske i uzorka tijekom trajanja pomicanja.
Idite na karticu napredan. Pod opcijama Pomaknite se efekti, odaberite karticu Rotating i ažurirajte sljedeće:
- Omogući rotiranje: DA
- Početna rotacija: -15 stupnjeva (na 0%)
- Srednja rotacija: 0 stupnjeva (od 40% do 60%)
- Završna rotacija: 15 stupnjeva (pri 100%)
Sakrij preljev odjeljka
Trenutačno linija ostaje vidljiva kad god se pomicanjem produži izvan odjeljka.
Da bismo ovo počistili, moramo sakriti preljev odjeljka. Da biste to učinili, otvorite postavke odjeljka. Ispod kartice napredanažurirajte opcije vidljivosti na sljedeći način:
- Horizontalni preljev: skriven
- Vertikalni preljev: skriveno
Sada izgleda bolje.
Vidi također: Divi: 12 kombinacija maski i pozadinskih uzoraka
Dodavanje sadržaja u liniju stvorenu za ovu svrhu
U ovom su trenutku maska pozadine i animacija pomicanja uzorka dovršeni. Sve što trebamo učiniti je dodati sadržaj koji želimo u redak koji smo prethodno stvorili za sadržaj.
Za ovaj smo primjer dodali 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
Nevjerojatno je kako je lako stvoriti tako lijepe pozadine s Divijevim opcijama pozadine. Osim toga, dodavanje animacije s Divi efektima pomicanja unosi novi život u ove dizajne.
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 pozadini, pogledajte ovo 12 kombinacija pozadinske maske i uzorka
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 je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o 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.
...
