Želite li dizajnirati pozadinu Divi Želite li stvoriti animirano pomicanje stranice pomoću maski i uzoraka? Ovaj vodič je za vas...
Dodavanje animacije pomicanja u Divi a njegove pozadinske maske i uzorci koristan su dizajnerski trik koji može udahnuti novi život dizajnu pozadine vaše web stranice.
U ovom tutorialu pokazat ćemo vam kako stvoriti i animirati pozadinske maske i uzorke koristeći Divijeve opcije pomicanja (nije potreban prilagođeni kod).
Da bismo to učinili, stvorit ćemo plutajući pozadinski sloj pomoću Divi linije koju ćemo koristiti za animiranje pozadinskih maski i uzoraka kada korisnik pomiče dio sadržaja.
Mislimo da će vam se svidjeti rezultat.
Krenimo!
pregled
Evo kratkog prikaza kako će izgledati animacija pomicanja pozadine u ovom tutorialu.
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 pozicionirana (apsolutno) tako da u potpunosti prekriva odjeljak (poput sloja). Redku možemo dodati pozadinski uzorak.
Zatim možemo dodati pozadinsku masku stupcu.
Zatim dodajemo efekti pomicanja u redak i stupac (poput skaliranja i rotiranja) što će zasebno animirati uzorak i masku u pozadini odjeljka.
Kada sakrijemo prelijevanje sekcije, sve što vidimo je animacija unutar sekcije.
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 Koristite Divi Builder
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 maske i uzorke pozadine za pomicanje pomoću Divija
Dizajn pozadine odjeljka
Prvo ćemo zanemariti stvaranje novog retka i prijeći izravno na izmjenu postojećeg zadanog odjeljka u alatu za izradu tema.
Da bi naš dizajn pozadine ispunio preglednik, moramo dodati vertikalnu visinu odjeljku. Jednostavan način za to je dodavanje minimalne visine odjeljku.
Otvorite postavke odjeljka. Pod karticom dizajnažurirajte minimalnu visinu i uklonite ispunu na sljedeći način:
- Margina: 80 vh (gornja i donja)
- Ispod: 0px (gornje i donje)
Dizajniranje gradijenta pozadine za odjeljak
Sada možemo dodati prilagođeni gradijent pozadine odjeljku.
Za dodavanje prvih zaustavljanja gradijenta, provjerite jesu li postavke sekcije otvorene pod karticom SadržajZatim 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 mu redak s jednim stupcem. Ovaj će se redak 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 koristili.
Sada biste trebali imati gornju liniju za animaciju pomicanja u pozadini i liniju za normalni sadržaj.
Prilagodite liniju
Sada kada je gradijent pozadine našeg odjeljka spreman, možemo se usredotočiti na liniju koju ćemo koristiti za animaciju pomicanja pozadine.
Otvorite postavke linije. Pod karticom napredanažurirajte sljedeće:
- Pozicija: Apsolutna
To će omogućiti liniji da se preklapa s odjeljkom bez zauzimanja stvarnog prostora u dokumentu.
Sada sve što trebamo učiniti je ažurirati visinu i širinu tako da pokrivaju cijelu širinu i visinu sekcije. To ć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 prekriva pozadinu cijelog odjeljka.
Napravite pozadinski uzorak za liniju
U ovom primjeru ćemo dodati uzorak Konfete kao pozadina linije.
Otvorite 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 responzivnim.
Dodajte efekte pomicanja liniji
Sada kada je naš pozadinski uzorak na mjestu, možemo dodati efekte pomicanja liniji.
Idi na karticu napredanPod 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 pozadinski uzorak linije s 50 piksela ulijevo na krajnjih 50 piksela udesno.
Odaberite karticu "Skaliranje 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 uzorak pozadine linije dok se pomičete.
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: Rotaciju biste trebali svesti na minimum, inače riskirate prikaz praznina tamo gdje linija ne prelazi odjeljak. Dobro pravilo je povećati mjerilo ako želite povećati rotaciju. To će omogućiti liniji da se rotira preko odjeljka bez otkrivanja rubova.
Dodajte pozadinsku masku s efektima pomicanja u stupac
Nakon što je naš redak dovršen, spremni smo dodati pozadinsku masku s efektima pomicanja u stupac u istom retku. Za početak, dodajmo pozadinsku masku.
Da biste to učinili, otvorite postavke stupca. Pod karticom 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 na mjestu, možemo dodati efekte pomicanja stupcu. Imajte na umu da stupac već ima efekte pomicanja naslijeđene iz 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.
Idi 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
Trenutno, linija ostaje vidljiva kad god pomicanjem izađe izvan odjeljka.
Da bismo to očistili, moramo sakriti višak sekcije. Da biste to učinili, otvorite postavke sekcije. Pod karticom napredanažurirajte opcije vidljivosti na sljedeći način:
- Horizontalni preljev: skriven
- Vertikalni preljev: skriveno
Sad izgleda bolje.
Vidi također: Divi: 12 kombinacija maski i pozadinskih uzoraka
Dodavanje sadržaja u liniju stvorenu za ovu svrhu
U ovoj fazi, pozadinska maska i animacija pomicanja uzorka su dovršene. Sve što trebamo učiniti je dodati željeni sadržaj u liniju koju smo ranije stvorili za sadržaj.
Za ovaj primjer dodali smo lažni naslov kako bismo mogli vidjeti kako će izgledati animacija pozadine sa statičkim tekstom.
Konačni rezultat
Pogledajmo konačni rezultat našeg dizajna.
Preuzmite DIVI sada!!!
Zaključak
Nevjerojatno je koliko je lako stvoriti tako prekrasne pozadine s Divijevim opcijama pozadine. Nadalje, dodavanje animacije s Divijevim efektima pomicanja udahne 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 Za osnovne informacije pogledajte ove 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.
...