Kunne du tænke dig at designe en baggrund Divi animeret, når du ruller på siden takket være masker og mønstre? Denne tutorial er til dig...
Tilføjelse af en rulle-animation til Divi og dens baggrundsmasker og -mønstre er et nyttigt designtip, der kan puste nyt liv i dine baggrundsdesigns. Websted.
I denne vejledning viser vi dig, hvordan du opretter og animerer masker og baggrundsmønstre ved hjælp af rullemulighederne i Divi (ingen brugerdefineret kode er nødvendig).
For at gøre dette vil vi oprette et flydende baggrundslag ved hjælp af en linje Divi som vi vil bruge til at animere masker og baggrundsmønstre, når en bruger ruller gennem en sektion af indhold.
Vi tror, du vil kunne lide resultatet.
Lad os starte!
undersøgelse
Her er en hurtig illustration af, hvordan baggrundsrulleanimationen til denne øvelse vil se ud.
Konceptet
Konceptet med dette design burde ikke være for svært at forstå. Vi starter med et afsnit, der har en gradientbaggrund.
Så laver vi en linje, der er placeret (absolut), så den dækker sektionen fuldstændigt (som en overlejring). Vi kan tilføje et baggrundsmønster til rækken.
Dernæst kan vi tilføje en baggrundsmaske til kolonnen.
Så tilføjer vi rulleeffekter til række og kolonne (som skala og rotation), som vil animere mønsteret og masken separat i baggrunden af afsnittet.
Når vi skjuler sektionsoverløbet, ser vi kun animationen indeholdt i sektionen.
Lad os starte med at oprette en side med Divi Builder
For at komme i gang skal du gøre følgende:
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Læs også: Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder
Sådan opretter du animerede rullende baggrundsmasker og mønstre med Divi
Sektionsbaggrundsdesign
Først springer vi over at oprette en linje og springer direkte ind i at redigere den eksisterende standardsektion i temabyggeren.
For at få vores baggrundsdesign til at fylde browseren, skal vi tilføje en lodret højde til sektionen. En enkel måde at gøre dette på er at tilføje en minimumshøjde til sektionen.
Åbn sektionsindstillinger. Under fanen Design, opdater minimumshøjden og fjern polstringen som følger:
- Margin: 80 vh (top og bund)
- Polstring: 0px (top og bund)
Design af en baggrundsgradient til sektionen
Vi kan nu tilføje en brugerdefineret baggrundsgradient til sektionen.
For at tilføje de første gradientstop skal du sørge for, at sektionsindstillingerne er åbne under fanen Indhold. Vælg derefter fanen Baggrundsgradient og klik for at tilføje en ny gradient. Dette vil tilføje to standard gradientfarver. Tilføj følgende gradientstop med farve og position som følger:
- Gradientstop:
- 0 %: #4158d0
- 50 %: #c850c0
- 100 %: #ffcc70
Skift derefter retningen af den lineære gradient:
- Gradientretning: 270 grader
Tilføj rækker til sektionen
Nu hvor vores sektion er på plads, skal du tilføje en række med én kolonne til sektionen. Denne linje vil blive brugt til vores baggrundsmaske og mønsterrulleanimation.
Dupliker derefter den linje, du lige har oprettet. Denne anden (duplikerede) linje vil blive brugt til vores indhold som du plejer.
Du skulle nu have en øverste linje til baggrundsrulleanimationen og en linje til indhold Normal.
Tilpas linje
Nu hvor vi har vores sektionsbaggrundsgradient klar, kan vi rette vores opmærksomhed mod den linje, vi skal bruge til vores baggrund-på-scroll-animation.
Åbn linjeindstillinger. Under fanen Avanceret, opdater følgende:
- Stilling: Absolut
Dette vil tillade linjen at overlappe sektionen uden at optage nogen reel plads i dokumentet.
Nu skal vi bare opdatere højden og bredden, så de spænder over hele sektionens bredde og højde. Dette vil skabe den overlejring, vi har brug for, og vores andet baggrundsdesignlag.
Under fanen Design, skal du opdatere størrelsesindstillingerne som følger:
- Aquasize kolonnehøjder: JA
- Bredde: 100 %
- Maks. bredde: 100 %
- Højde: 100%
- Polstring: 0px (top og bund)
Nu kan du måske ikke se stregen, men den dækker nu perfekt baggrunden for hele afsnittet.
Lav et baggrundsmønster til linjen
I dette eksempel vil vi tilføje mønsteret Konfetti som linjebaggrund.
Åbn linjeindstillinger. Under muligheden Baggrund, vælg fanen Baggrundsmønster og opdatere følgende:
- Baggrundsmønster: Konfetti
- Mønster:
- Farve: #f6bef7
- Størrelse: Brugerdefineret størrelse
- Bredde: 35 vw
- Gentag oprindelse: midten
BEMÆRK : Brug af VW-længdeenheden sikrer, at mønsteret skaleres med browseren, hvilket holder designet konsekvent og responsivt.
Tilføj rulleeffekter til linje
Nu hvor vores baggrundsmønster er på plads, kan vi tilføje rulleeffekter til linjen.
Gå til fanen Avanceret. Under muligheden Rulleeffekter, opdater følgende:
Vælg fanen Vandret bevægelse og opdatere følgende:
- Aktiver vandret bevægelse: JA
- Startforskydning: 0,5 (ved 0 %)
- Midtforskydning: 0 (fra 40 % til 60 %)
- Slutforskydning: -0,5 (ved 100 %)
Dette vil flytte linjebaggrundsmønsteret, der starter 50 pixels til venstre og slutter 50 pixels til højre.
Vælg fanen "Skaler op og ned", og opdater følgende:
- Aktiver skalering op og ned: JA
- Startskala: 150 % (ved 0 %)
- Mellemskala: 100 % (fra 40 % til 60 %)
- Slutskala: 150 % (ved 100 %)
Dette vil skalere rækkens baggrundsmønster, når du ruller.
Vælg fanen « Roterende » og opdatere følgende:
- Aktiver rotering: JA
- Startrotation: 10 grader (ved 0 %)
- Mellemrotation: 0 grader (fra 40 % til 60 %)
- Slutrotation: -10 grader (ved 100 %)
NØGLE TIP: Du skal holde rotationen på et minimum, ellers risikerer du at vise huller, hvor linjen ikke strækker sig forbi sektionen. En god tommelfingerregel er at øge skalaen, hvis du vil øge rotationen. Dette vil tillade linjen at dreje over sektionen uden at blotlægge kanterne.
Tilføj baggrundsmaske med rulleeffekter til kolonnen
Når vores række er færdig, er vi klar til at tilføje en baggrundsmaske med rulleeffekter til kolonnen i samme række. For at starte, lad os tilføje en baggrundsmaske.
For at gøre dette skal du åbne kolonneindstillingen. Under fanen Baggrundsmaske, opdater følgende:
- Maske: Layer Blob
- Farve: #ffffff
- Masketransformation: Horisontal vending, Inversion
Tilføj rulleeffekter til kolonnen
Nu hvor vores baggrundsmaske er på plads, kan vi tilføje rulleeffekter til kolonnen. Husk, at kolonnen allerede har rulleeffekter, der er arvet fra den overordnede række.
Alt, hvad vi skal gøre, er at rotere kolonnen i den modsatte retning af rækken for at opnå mere adskillelse af masken og mønsteret i løbet af rullen.
Gå til fanen Avanceret. Under muligheder Rulleeffekter, vælg fanen Rotating og opdater følgende:
- Aktiver rotering: JA
- Startrotation: -15 grader (ved 0%)
- Mellemrotation: 0 grader (fra 40 % til 60 %)
- Slutrotation: 15 grader (ved 100 %)
Skjul sektionsoverløb
I øjeblikket forbliver linjen synlig, når rulning får den til at strække sig ud over sektionen.
For at rydde op i dette skal vi skjule sektionsoverløbet. For at gøre dette skal du åbne sektionsindstillingerne. Under fanen Avanceret, skal du opdatere synlighedsindstillingerne som følger:
- Vandret overløb: Skjult
- Lodret overløb: Skjult
Nu ser det bedre ud.
Se også: Divi: 12 kombinationer af masker og baggrundsmønstre
Tilføjelse af indhold til den linje, der er oprettet til dette formål
På dette tidspunkt er baggrundsmasken og mønsterrulleanimationen færdig. Det eneste, vi skal gøre, er at tilføje det indhold, vi ønsker, til den linje, vi tidligere har oprettet for indholdet.
Til dette eksempel har vi tilføjet en dummy-titel, så vi kan se, hvordan baggrundsanimationen vil se ud med statisk tekst.
Endelig resultat
Lad os tage et kig på slutresultatet af vores design.
Download DIVI nu!!!
Konklusion
Det er utroligt, hvor nemt det er at skabe så smukke baggrunde med Divis baggrundsmuligheder. Plus, tilføjelse af animation med Divis rulleeffekter bringer nyt liv til disse designs.
For et andet look kan du prøve forskellige masker og mønstre på hvert lag. Hvis du vil have mere inspiration til, hvordan du bruger masker og mønstre baggrund, tjek disse 12 kombinationer af baggrundsmaske og mønster
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
