Chceli by ste navrhnúť pozadie divi animovaný pri posúvaní stránky vďaka maskám a vzorom? Tento tutoriál je pre vás...
Pridanie animácie posúvania do divi a jeho masky a vzory na pozadí sú užitočným tipom na dizajn, ktorý môže vdýchnuť nový život vašim návrhom pozadia. webové stránky.
V tomto návode vám ukážeme, ako vytvoriť a animovať masky a vzory pozadia pomocou možností posúvania divi (nie je potrebný žiadny vlastný kód).
Na tento účel vytvoríme plávajúcu vrstvu pozadia pomocou čiary divi ktoré použijeme na animáciu masiek a vzorov na pozadí, keď používateľ roluje cez sekciu obsah.
Veríme, že sa vám výsledok bude páčiť.
Začnime!
prehľad
Tu je rýchla ilustrácia toho, ako bude vyzerať animácia posúvania na pozadí pre tento tutoriál.
Koncept
Koncept tohto dizajnu by nemal byť príliš ťažké pochopiť. Začneme sekciou, ktorá má gradientné pozadie.
Potom vytvoríme čiaru, ktorá je umiestnená (absolútne) tak, aby úplne pokrývala rez (ako prekrytie). Do riadku môžeme pridať vzor pozadia.
Ďalej môžeme do stĺpca pridať masku pozadia.
Potom pridáme rolovacie efekty na riadok a stĺpec (ako mierka a rotácia), čím sa vzor a maska animujú samostatne na pozadí sekcie.
Keď skryjeme pretečenie sekcie, všetko, čo vidíme, je animácia obsiahnutá v sekcii.
Začnime vytvorením stránky pomocou Divi Builder
Ak chcete začať, budete musieť urobiť nasledovné:
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použitie divi Staviteľ
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Čítajte tiež: Divi: Ako používať "Gradient Builder" na skrášlenie vašich obrázkov
Ako vytvoriť animované rolovacie masky a vzory na pozadí pomocou Divi
Návrh pozadia sekcie
Najprv preskočíme vytváranie riadku a prejdeme priamo k úprave existujúcej predvolenej sekcie v nástroji na tvorbu tém.
Aby náš dizajn pozadia vyplnil prehliadač, musíme sekcii pridať zvislú výšku. Jednoduchý spôsob, ako to urobiť, je pridať minimálnu výšku sekcie.
Otvorte nastavenia sekcie. Pod záložkou dizajn, aktualizujte minimálnu výšku a odstráňte výplň nasledovne:
- Okraj: 80 vh (hore a dole)
- Výplň: 0px (hore a dole)
Návrh prechodu pozadia pre sekciu
Teraz môžeme do sekcie pridať vlastný gradient pozadia.
Ak chcete pridať prvé zarážky gradientu, skontrolujte, či sú pod kartou otvorené nastavenia sekcie obsah. Potom vyberte kartu Prechod pozadia a kliknutím pridajte nový prechod. Tým sa pridajú dve predvolené farby prechodu. Pridajte nasledujúce zarážky prechodu s farbou a polohou takto:
- Zarážky prechodu:
- 0%: #4158d0
- 50%: #c850c0
- 100 %: #ffcc70
Potom zmeňte smer lineárneho gradientu:
- Smer gradientu: 270 stupňov
Pridajte riadky do sekcie
Teraz, keď je naša sekcia na svojom mieste, pridajte do sekcie riadok s jedným stĺpcom. Tento riadok sa použije pre našu animáciu posúvania masky pozadia a vzoru.
Potom duplikujte riadok, ktorý ste práve vytvorili. Tento druhý (duplikovaný) riadok bude použitý pre náš obsah ako by ste normálne robili.
Teraz by ste mali mať horný riadok pre animáciu posúvania na pozadí a riadok pre animáciu obsah normálu.
Prispôsobiť linku
Teraz, keď máme pripravený prechod pozadia sekcie, môžeme obrátiť svoju pozornosť na čiaru, ktorú použijeme pre našu animáciu pozadia pri rolovaní.
Otvorte nastavenia linky. Pod záložkou pokročilý, aktualizujte nasledovné:
- Pozícia: Absolútna
To umožní, aby riadok prekrýval sekciu bez toho, aby zaberal akékoľvek skutočné miesto v dokumente.
Teraz všetko, čo musíme urobiť, je aktualizovať výšku a šírku tak, aby pokrývali celú šírku a výšku sekcie. Tým sa vytvorí prekrytie, ktoré potrebujeme, a naša druhá vrstva dizajnu pozadia.
Pod záložkou dizajn, aktualizujte možnosti veľkosti takto:
- Výška stĺpca Aquasize: ÁNO
- Šírka: 100 %
- Maximálna šírka: 100 %
- výška: 100%
- Výplň: 0px (hore a dole)
Teraz možno čiaru nevidíte, ale teraz dokonale pokrýva pozadie celej sekcie.
Vytvorte vzor pozadia pre čiaru
V tomto príklade pridáme vzor Konfety ako pozadie čiary.
Otvorte nastavenia linky. Pod možnosťou pozadia, vyberte kartu Vzor pozadia a aktualizujte nasledovné:
- Vzor pozadia: konfety
- Vzor:
- Farba: #f6bef7
- Veľkosť: Vlastná veľkosť
- Šírka: 35 vw
- Opakovať pôvod: Stred
POZNÁMKA : Použitie jednotky dĺžky VW zaisťuje, že vzor sa bude škálovať s prehliadačom, pričom dizajn zostane konzistentný a pohotový.
Pridať efekty posúvania na riadok
Teraz, keď je náš vzor pozadia na svojom mieste, môžeme na čiaru pridať efekty posúvania.
Prejdite na kartu pokročilý. Pod možnosťou Efekty posúvania, aktualizujte nasledovné:
Vyberte kartu Horizontálny pohyb a aktualizujte nasledovné:
- Povoliť horizontálny pohyb: ÁNO
- Počiatočný posun: 0,5 (pri 0 %)
- Stredný posun: 0 (od 40 % do 60 %)
- Posun na konci: -0,5 (pri 100 %)
Tým sa posunie vzor pozadia čiary začínajúci o 50 pixelov doľava a končiaci o 50 pixelov doprava.
Vyberte kartu „Zväčšiť a znížiť“ a aktualizujte nasledujúce:
- Povoliť zväčšenie a zmenšenie: ÁNO
- Počiatočná mierka: 150 % (pri 0 %)
- Stredná mierka: 100 % (od 40 % do 60 %)
- Konečná mierka: 150 % (pri 100 %)
Tým sa pri rolovaní zmení mierka vzoru pozadia riadka.
Vyberte kartu « Rotujúce » a aktualizujte nasledovné:
- Povoliť otáčanie: ÁNO
- Štartovacia rotácia: 10 stupňov (pri 0 %)
- Stredná rotácia: 0 stupňov (od 40 % do 60 %)
- Konečná rotácia: -10 stupňov (pri 100%)
KĽÚČOVÝ TIP: Rotáciu musíte obmedziť na minimum, inak riskujete zobrazenie medzier tam, kde čiara nepresahuje časť. Dobrým pravidlom je zväčšiť mierku, ak chcete zvýšiť rotáciu. To umožní, aby sa línia otáčala cez sekciu bez odhalenia okrajov.
Pridajte do stĺpca masku pozadia s efektmi posúvania
Po dokončení nášho riadku sme pripravení pridať masku pozadia s efektmi posúvania do stĺpca v tom istom riadku. Na začiatok pridajte masku pozadia.
Ak to chcete urobiť, otvorte nastavenie stĺpca. Pod záložkou Maska pozadia, aktualizujte nasledovné:
- Maska: Vrstva Blob
- Farba: #ffffff
- Transformácia masky: Horizontálne prevrátenie, Inverzia
Pridajte rolovacie efekty do stĺpca
Teraz, keď je naša maska pozadia na mieste, môžeme do stĺpca pridať efekty posúvania. Majte na pamäti, že stĺpec už má efekty posúvania zdedené z nadradeného riadka.
Všetko, čo urobíme, je otáčať stĺpec v opačnom smere ako riadok, aby sme dosiahli väčšie oddelenie masky a vzoru počas trvania rolovania.
Prejdite na kartu pokročilý. V časti Možnosti Efekty posúvania, vyberte kartu Rotating a aktualizujte nasledovné:
- Povoliť otáčanie: ÁNO
- Štartovacia rotácia: -15 stupňov (pri 0%)
- Stredná rotácia: 0 stupňov (od 40 % do 60 %)
- Konečná rotácia: 15 stupňov (pri 100%)
Skryť pretečenie sekcie
V súčasnosti zostáva čiara viditeľná vždy, keď rolovanie spôsobí jej predĺženie za sekciu.
Aby sme to vyčistili, musíme skryť pretečenie sekcie. Ak to chcete urobiť, otvorte nastavenia sekcie. Pod záložkou pokročilý, aktualizujte možnosti viditeľnosti takto:
- Horizontálne pretečenie: Skryté
- Vertikálne pretečenie: Skryté
Teraz to vyzerá lepšie.
Pozri tiež: Divi: 12 kombinácií masiek a vzorov pozadia
Pridanie obsahu do riadku vytvoreného na tento účel
V tomto bode je maska pozadia a animácia posúvania vzoru dokončená. Všetko, čo musíme urobiť, je pridať požadovaný obsah do riadku, ktorý sme predtým vytvorili pre obsah.
V tomto príklade sme pridali fiktívny názov, aby sme videli, ako bude vyzerať animácia na pozadí so statickým textom.
Konečný výsledok
Poďme sa pozrieť na konečný výsledok nášho dizajnu.
Stiahnite si DIVI teraz!!!
záver
Je úžasné, aké ľahké je vytvoriť také nádherné pozadia s možnosťami pozadia Divi. Navyše pridanie animácie s efektmi posúvania Divi vnáša do týchto návrhov nový život.
Pre iný vzhľad môžete vyskúšať rôzne masky a vzory na každej vrstve. Ak chcete viac inšpirácie, ako použiť masky a vzory pozadie, pozrite si tieto 12 kombinácií masky a vzoru pozadia
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
