Vill du designa en bakgrund Divi animerad när du rullar på sidan tack vare masker och mönster? Den här handledningen är för dig...
Lägga till en scroll-animation till Divi och dess bakgrundsmasker och mönster är ett användbart designtips som kan blåsa nytt liv i dina bakgrundsdesigner. webbplats.
I den här handledningen kommer vi att visa dig hur du skapar och animerar masker och bakgrundsmönster med hjälp av rullningsalternativen i Divi (ingen anpassad kod behövs).
För att göra detta kommer vi att skapa ett flytande bakgrundslager med hjälp av en linje Divi som vi kommer att använda för att animera masker och bakgrundsmönster när en användare bläddrar genom en del av innehåll.
Vi tror att du kommer att gilla resultatet.
Låt oss börja!
undersökningen
Här är en snabb illustration av hur bakgrundsrullningsanimeringen för denna handledning kommer att se ut.
Konceptet
Konceptet med denna design borde inte vara alltför svårt att förstå. Vi börjar med ett avsnitt som har en gradientbakgrund.
Sedan skapar vi en linje som är placerad (absolut) så att den helt täcker sektionen (som ett överlägg). Vi kan lägga till ett bakgrundsmönster i raden.
Därefter kan vi lägga till en bakgrundsmask till kolumnen.
Sedan lägger vi till rullningseffekter till rad och kolumn (som skala och rotation) som kommer att animera mönstret och maskera separat i bakgrunden av avsnittet.
När vi döljer sektionsspillet ser vi bara animationen som finns i sektionen.
Låt oss börja med att skapa en sida med Divi Builder
För att komma igång måste du göra följande:
Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
Ge den en titel som är vettig för dig och klicka Använda Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk för att börja designa i Divi.
Läs också: Divi: Hur man använder "Gradient Builder" för att försköna dina bilder
Hur man skapar animerade rullande bakgrundsmasker och mönster med Divi
Avsnitt bakgrundsdesign
Först hoppar vi över att skapa en rad och hoppar direkt till att redigera det befintliga standardavsnittet i temabyggaren.
För att få vår bakgrundsdesign att fylla webbläsaren måste vi lägga till en vertikal höjd till avsnittet. Ett enkelt sätt att göra detta är att lägga till en minimihöjd på sektionen.
Öppna avsnittsinställningar. Under fliken Designa, uppdatera minimihöjden och ta bort stoppningen enligt följande:
- Marginal: 80 vh (topp och botten)
- Utfyllnad: 0px (topp och botten)
Designa en bakgrundsgradient för avsnittet
Vi kan nu lägga till en anpassad bakgrundsgradient till avsnittet.
För att lägga till de första gradientstoppen, se till att avsnittsinställningarna är öppna under fliken Innehåll. Välj sedan fliken Bakgrundsgradient och klicka för att lägga till en ny gradient. Detta kommer att lägga till två standardgradientfärger. Lägg till följande gradientstopp med färg och position enligt följande:
- Gradientstopp:
- 0 %: #4158d0
- 50 %: #c850c0
- 100 %: #ffcc70
Ändra sedan riktningen för den linjära gradienten:
- Lutningsriktning: 270 grader
Lägg till rader i avsnitt
Nu när vår sektion är på plats lägger du till en rad med en kolumn i sektionen. Den här raden kommer att användas för vår bakgrundsmask och mönsterrullningsanimering.
Duplicera sedan raden du just skapade. Denna andra (duplicerade) rad kommer att användas för vår innehåll som du brukar.
Du bör nu ha en övre rad för bakgrundsrullningsanimeringen och en rad för innehåll Normal.
Anpassa linje
Nu när vi har vår sektionsbakgrundsgradient klar kan vi rikta vår uppmärksamhet mot linjen vi ska använda för vår bakgrund-på-rullningsanimering.
Öppna linjeinställningar. Under fliken Advanced Open water, uppdatera följande:
- Position: Absolut
Detta kommer att tillåta raden att överlappa avsnittet utan att ta upp något verkligt utrymme i dokumentet.
Nu behöver vi bara uppdatera höjden och bredden så att de spänner över hela sektionens bredd och höjd. Detta kommer att skapa överlägget vi behöver och vårt andra bakgrundsdesignlager.
Under fliken Designa, uppdatera storleksalternativen enligt följande:
- Aquasize kolumnhöjder: JA
- Bredd: 100 %
- Max bredd: 100 %
- Höjd: 100%
- Utfyllnad: 0px (topp och botten)
Nu kanske du inte kan se linjen, men den täcker nu perfekt bakgrunden av hela avsnittet.
Skapa ett bakgrundsmönster för linjen
I det här exemplet lägger vi till mönstret Konfetti som linjebakgrund.
Öppna linjeinställningar. Under alternativet Bakgrundväljer du fliken Bakgrundsmönster och uppdatera följande:
- Bakgrundsmönster: Konfetti
- Mönster:
- Färg: #f6bef7
- Storlek: Anpassad storlek
- Bredd: 35 vw
- Upprepa Ursprung: Center
NOTERA : Att använda VW-längdenheten säkerställer att mönstret skalas med webbläsaren, vilket håller designen konsekvent och responsiv.
Lägg till rullningseffekter till linje
Nu när vårt bakgrundsmönster är på plats kan vi lägga till rullningseffekter på linjen.
Gå till fliken Advanced Open water. Under alternativet Ruleffekter, uppdatera följande:
Välj fliken Horisontell rörelse och uppdatera följande:
- Aktivera horisontell rörelse: JA
- Startoffset: 0,5 (vid 0 %)
- Mittoffset: 0 (från 40 % till 60 %)
- Slutförskjutning: -0,5 (vid 100 %)
Detta kommer att flytta linjebakgrundsmönstret med början 50px till vänster och slutar 50px till höger.
Välj fliken "Skala upp och ned" och uppdatera följande:
- Aktivera skalning upp och ned: JA
- Startskala: 150 % (vid 0 %)
- Mellanskala: 100 % (från 40 % till 60 %)
- Slutskala: 150 % (vid 100 %)
Detta kommer att skala radens bakgrundsmönster när du rullar.
Välj fliken « Roterande » och uppdatera följande:
- Aktivera rotering: JA
- Startrotation: 10 grader (vid 0 %)
- Mellanrotation: 0 grader (från 40 % till 60 %)
- Slutrotation: -10 grader (vid 100 %)
NYCKELTIPS: Du måste hålla rotationen till ett minimum, annars riskerar du att visa luckor där linjen inte sträcker sig förbi sektionen. En bra tumregel är att öka skalan om du vill öka rotationen. Detta gör att linjen kan svänga över sektionen utan att exponera kanterna.
Lägg till bakgrundsmask med rullningseffekter till kolumnen
När vår rad är klar är vi redo att lägga till en bakgrundsmask med rullningseffekter i kolumnen på samma rad. För att börja, låt oss lägga till en bakgrundsmask.
För att göra detta, öppna kolumninställningen. Under fliken Bakgrundsmask, uppdatera följande:
- Mask: Layer Blob
- Färg: #ffffff
- Mask Transform: Horisontell Vänd, Inversion
Lägg till rullningseffekter i kolumnen
Nu när vår bakgrundsmask är på plats kan vi lägga till rullningseffekter i kolumnen. Tänk på att kolumnen redan har rullningseffekter som ärvts från den överordnade raden.
Allt vi ska göra är att rotera kolumnen i motsatt riktning av raden för att uppnå mer separation av masken och mönstret under rullningens varaktighet.
Gå till fliken Advanced Open water. Under alternativ Ruleffekterväljer du fliken Rotating och uppdatera följande:
- Aktivera rotering: JA
- Startrotation: -15 grader (vid 0 %)
- Mellanrotation: 0 grader (från 40 % till 60 %)
- Slutrotation: 15 grader (vid 100 %)
Dölj sektionsspill
För närvarande förblir linjen synlig när rullning gör att den sträcker sig bortom sektionen.
För att rensa upp detta måste vi dölja sektionsspillet. För att göra detta, öppna avsnittsinställningarna. Under fliken Advanced Open water, uppdatera synbarhetsalternativen enligt följande:
- Horisontellt överflöde: Dold
- Vertikalt överflöde: Dold
Nu ser det bättre ut.
Se även: Divi: 12 kombinationer av masker och bakgrundsmönster
Lägga till innehåll på raden som skapats för detta ändamål
Vid det här laget är bakgrundsmasken och mönsterrullningsanimeringen klar. Allt vi behöver göra är att lägga till innehållet vi vill ha till raden vi skapade tidigare för innehållet.
För det här exemplet har vi lagt till en dummytitel så att vi kan se hur bakgrundsanimationen kommer att se ut med statisk text.
Slutresultat
Låt oss ta en titt på slutresultatet av vår design.
Ladda ner DIVI nu!!!
Slutsats
Det är otroligt hur enkelt det är att skapa så vackra bakgrunder med Divis bakgrundsalternativ. Plus, att lägga till animation med Divis rullningseffekter ger nytt liv till dessa designs.
För ett annat utseende kan du prova olika masker och mönster på varje lager. Om du vill ha mer inspiration om hur du använder masker och mönster bakgrund, kolla in dessa 12 kombinationer av bakgrundsmask och mönster
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
