Vil du designe en bakgrunn Divi animert når du ruller siden takket være masker og mønstre? Denne opplæringen er for deg...

Legger til en rulleanimasjon til Divi og bakgrunnsmaskene og mønstrene er et nyttig designtips som kan blåse nytt liv i bakgrunnsdesignene dine. nettstedet Web

I denne opplæringen vil vi vise deg hvordan du lager og animerer masker og bakgrunnsmønstre ved å bruke rullealternativene til Divi (ingen egendefinert kode nødvendig). 

For å gjøre dette vil vi lage et flytende bakgrunnslag ved hjelp av en linje Divi som vi vil bruke til å animere masker og bakgrunnsmønstre når en bruker blar gjennom en del av innhold

Vi tror du vil like resultatet.

La oss begynne!

undersøkelsen

Her er en rask illustrasjon av hvordan bakgrunnsrulleanimasjonen for denne opplæringen vil se ut.

animert Divi-bakgrunn når du ruller siden takket være masker og mønstre

Konseptet

Konseptet med dette designet bør ikke være for vanskelig å forstå. Vi starter med en seksjon som har en gradientbakgrunn.

utform en animert Divi-bakgrunn når du ruller siden ved hjelp av masker og mønstre

Deretter lager vi en linje som er plassert (absolutt) slik at den dekker hele seksjonen (som et overlegg). Vi kan legge til et bakgrunnsmønster i raden.

Deretter kan vi legge til en bakgrunnsmaske til kolonnen.

Så legger vi til rulleeffekter til rad og kolonne (som skala og rotasjon) som vil animere mønsteret og masken separat i bakgrunnen av seksjonen.

utform en animert Divi-bakgrunn når du ruller siden ved hjelp av masker og mønstre

Når vi skjuler seksjonsoverløpet, ser vi bare animasjonen i seksjonen.

animert Divi-bakgrunn når du ruller siden takket være masker og mønstre

La oss starte med å lage en side med Divi Builder

For å komme i gang må du gjøre følgende:

Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.

utform en animert Divi-bakgrunn når du ruller siden ved hjelp av masker og mønstre

Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder

#bildetittel

deretter klikker du Begynn å bygge (Bygg fra bunnen av)

utform en animert Divi-bakgrunn når du ruller siden ved hjelp av masker og mønstre

Etter det vil du ha et blankt lerret for å begynne å designe i Divi.

Les også: Divi: Hvordan bruke "Gradient Builder" for å forskjønne bildene dine

Hvordan lage animerte rullende bakgrunnsmasker og mønstre med Divi

Seksjonsbakgrunnsdesign

Først hopper vi over å lage en linje og hopper rett inn i å redigere den eksisterende standarddelen i temabyggeren. 

For å få bakgrunnsdesignet til å fylle nettleseren, må vi legge til en vertikal høyde til seksjonen. En enkel måte å gjøre dette på er å legge til en minimumshøyde til seksjonen.

Åpne seksjonsinnstillinger. Under fanen utforming, oppdater minimumshøyden og fjern polstringen som følger:

  • Margin: 80 vh (øverst og bunn)
  • Polstring: 0px (øverst og bunn)

Utforme en bakgrunnsgradient for delen

Vi kan nå legge til en tilpasset bakgrunnsgradient til delen.

For å legge til de første gradientstoppene, sørg for at seksjonsinnstillingene er åpne under fanen Innhold. Velg deretter fanen Bakgrunnsgradient og klikk for å legge til en ny gradient. Dette vil legge til to standard gradientfarger. Legg til følgende gradientstopp med farge og posisjon som følger:

  • Gradientstopp:
    • 0 %: #4158d0
    • 50 %: #c850c0
    • 100 %: #ffcc70

Endre deretter retningen på den lineære gradienten:

  • Gradientretning: 270 grader

Legg til rader i seksjonen

Nå som seksjonen vår er på plass, legg til en rad med én kolonne i seksjonen. Denne linjen vil bli brukt til vår bakgrunnsmaske og mønsterrulleanimasjon.

Deretter dupliserer linjen du nettopp opprettet. Denne andre (dupliserte) linjen vil bli brukt for vår innhold som du vanligvis ville gjort. 

Du bør nå ha en topplinje for bakgrunnsrulleanimasjonen og en linje for innhold Normal.

Tilpass linje

Nå som vi har seksjonsbakgrunnsgradienten klar, kan vi rette oppmerksomheten mot linjen vi skal bruke for bakgrunns-på-rull-animasjonen. 

Åpne linjeinnstillinger. Under fanen Avansert, oppdater følgende:

  • Stilling: Absolutt

Dette vil tillate linjen å overlappe seksjonen uten å ta opp noen reell plass i dokumentet. 

Nå trenger vi bare å oppdatere høyden og bredden slik at de spenner over hele bredden og høyden på seksjonen. Dette vil skape overlegget vi trenger og vårt andre bakgrunnsdesignlag.

Under fanen utforming, oppdater størrelsesalternativene som følger:

  • Aquasize kolonnehøyder: JA
  • Bredde: 100 %
  • Maks bredde: 100 %
  • Høyde: 100 %
  • Polstring: 0px (øverst og bunn)

Nå kan du kanskje ikke se linjen, men den dekker nå perfekt bakgrunnen til hele delen.

Lag et bakgrunnsmønster for linjen

I dette eksemplet legger vi til mønsteret Confetti som linjebakgrunn.

Åpne linjeinnstillinger. Under alternativet Bakgrunnvelger du fanen Bakgrunnsmønster og oppdater følgende:

  • Bakgrunnsmønster: Konfetti
  • Mønster:
    • Farge: #f6bef7
    • Størrelse: Egendefinert størrelse
    • Bredde: 35 vw
    • Gjenta opprinnelse: Senter

NOTE : Bruk av VW-lengdeenheten sikrer at mønsteret skaleres med nettleseren, og holder designet konsistent og responsivt.

Legg til rulleeffekter på linje

Nå som bakgrunnsmønsteret vårt er på plass, kan vi legge til rulleeffekter på linjen.

Gå til fanen Avansert. Under alternativet Rulleeffekter, oppdater følgende:

Velg fanen Horisontal-bevegelse og oppdater følgende:

  • Aktiver horisontal bevegelse: JA
  • Startforskyvning: 0,5 (ved 0 %)
  • Midtforskyvning: 0 (fra 40 % til 60 %)
  • Sluttforskyvning: -0,5 (ved 100 %)

Dette vil flytte linjebakgrunnsmønsteret som starter 50px til venstre og slutter 50px til høyre.

Velg kategorien "Skaler opp og ned" og oppdater følgende:

  • Aktiver skalering opp og ned: JA
  • Startskala: 150 % (ved 0 %)
  • Mellomskala: 100 % (fra 40 % til 60 %)
  • Sluttskala: 150 % (ved 100 %)

Dette vil skalere radens bakgrunnsmønster når du ruller.

Hvordan animere masker og bakgrunnsmønstre på scroll med Divi

Velg fanen « Roterende  » og oppdater følgende:

  • Aktiver rotering: JA
  • Startrotasjon: 10 grader (ved 0 %)
  • Midtrotasjon: 0 grader (fra 40 % til 60 %)
  • Sluttrotasjon: -10 grader (ved 100 %)

NØKKELTIPS: Du må holde rotasjonen på et minimum, ellers risikerer du å vise hull der linjen ikke strekker seg forbi seksjonen. En god tommelfingerregel er å øke skalaen hvis du ønsker å øke rotasjonen. Dette vil tillate linjen å svinge over seksjonen uten å eksponere kantene.

Legg til bakgrunnsmaske med rulleeffekter til kolonnen

Når raden vår er fullført, er vi klare til å legge til en bakgrunnsmaske med rulleeffekter i kolonnen i samme rad. For å starte, la oss legge til en bakgrunnsmaske.

For å gjøre dette, åpne kolonneinnstillingen. Under fanen Bakgrunnsmaske, oppdater følgende:

  • Maske: Layer Blob
  • Farge: #ffffff
  • Mask Transform: Horisontal Flip, Inversion

Legg til rulleeffekter i kolonnen

Nå som bakgrunnsmasken vår er på plass, kan vi legge til rulleeffekter i kolonnen. Husk at kolonnen allerede har rulleeffekter som er arvet fra den overordnede raden. 

Alt vi skal gjøre er å rotere kolonnen i motsatt retning av raden for å oppnå mer separasjon av masken og mønsteret under varigheten av rullingen.

Gå til fanen Avansert. Under alternativer Rulleeffektervelger du fanen Rotating og oppdater følgende:

  • Aktiver rotering: JA
  • Startrotasjon: -15 grader (ved 0 %)
  • Midtrotasjon: 0 grader (fra 40 % til 60 %)
  • Sluttrotasjon: 15 grader (ved 100 %)

Skjul seksjonsoverløp

Foreløpig forblir linjen synlig hver gang rulling får den til å strekke seg utover seksjonen.

animert Divi-bakgrunn når du ruller siden takket være masker og mønstre

For å rydde opp i dette, må vi skjule seksjonsoverløpet. For å gjøre dette, åpne seksjonsinnstillingene. Under fanen Avansert, oppdater synlighetsalternativene som følger:

  • Horisontalt overløp: Skjult
  • Vertikal overløp: Skjult

Nå ser det bedre ut.

animert Divi-bakgrunn når du ruller siden takket være masker og mønstre

Se også: Divi: 12 kombinasjoner av masker og bakgrunnsmønstre

Legge til innhold på linjen som er opprettet for dette formålet

På dette tidspunktet er bakgrunnsmasken og mønsterrulleanimasjonen fullført. Alt vi trenger å gjøre er å legge til innholdet vi ønsker på linjen vi laget tidligere for innholdet.

For dette eksemplet har vi lagt til en dummy-tittel slik at vi kan se hvordan bakgrunnsanimasjonen vil se ut med statisk tekst.

utform en animert Divi-bakgrunn når du ruller siden ved hjelp av masker og mønstre

Endelig resultat

La oss ta en titt på sluttresultatet av designet vårt.

animert Divi-bakgrunn når du ruller siden takket være masker og mønstre

Last ned DIVI nå!!!

konklusjonen

Det er utrolig hvor enkelt det er å lage slike vakre bakgrunner med Divis bakgrunnsalternativer. I tillegg gir det å legge til animasjon med Divis rulleeffekter nytt liv til disse designene.

For et annet utseende kan du prøve forskjellige masker og mønstre på hvert lag. Hvis du vil ha mer inspirasjon til hvordan du bruker masker og mønstre bakgrunn, sjekk ut disse 12 bakgrunnsmaske og mønsterkombinasjoner

Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.

Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...