Hvis du leter etter en måte å lage jevne animasjoner med Divis innebygde rulleeffekter, kommer du til å elske denne opplæringen. Vi viser deg hvordan du kombinerer rullebildet med Divis innebygde bevegelseseffekter for å lage seksjoner i full høyde som du kan bla gjennom på en gang.
Vi begynner med å lage den første delen. Vi vil derfor bruke denne delen gjennom hele utformingen av siden vår. For å aktivere rulleknipsing bruker vi CSS-rulleknappegenskapene som vi tildeler seksjonene, HTML, topptekst og bunntekst på siden vår.
Mulig utfall
Før vi dykker ned i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.
1. Lag en ny side og begynn å designe den første delen
Legg til en ny side og bytt til Visual Builder
Start med å legge til en ny side. Skriv inn sidetittelen, publiser siden, og bytt til Visual Builder.
Seksjonsinnstillinger
dimensjonering
Når du er inne på den nye siden, åpner du delen der og endrer størrelsesinnstillingene.
- Min høyde: 100vh
Hovedelement
Vi legger også til to linjer med CSS-kode i seksjonen. Disse linjene med CSS-kode hjelper oss med å gjøre seksjonen om til et snappunkt for bla.
scroll-snap-align: start; scroll-snap-stop: normal;
synlighet
For å sikre at ingenting er utenfor seksjonsbeholderen, legger vi skjul på at avsnittet flyter over.
- Horisontalt overløp: skjult
- Vertikal overløp: skjult
Legg til linje 1
Kolonne struktur
Fortsett å legge til en ny linje til seksjonen ved hjelp av følgende kolonnestruktur:
dimensjonering
Uten å legge til noen moduler ennå, åpner du radinnstillingene og endrer størrelsen på følgende måte:
- Bruk tilpasset rennebredde: Ja
- Rennebredde: 1
- Bredde: 100%
- Maks bredde: 100%
Mellomrom
Vi fjerner også seksjonens standard polstring på topp og bunn.
- Topp polstring: 0px
- Bunn polstring: 0px
Stilling
Og vi plasserer raden deretter:
- Posisjon: Absolutt
- Sted: Bunnsenter
Legg til tekstmodul i kolonnen
La innholdsboksen være tom
Den eneste modulen vi trenger i denne raden er en tekstmodul. Pass på at du lar innholdsboksen for modulen være tom.
Bakgrunnsfarge
Endre deretter bakgrunnsfargen.
- Bakgrunnsfarge: # ffee00
Tekstinnstillinger
Vi fjerner også modulens tekstlinjehøyde.
- Tekstlinje høyde: 1 em
Størrelse
Deretter går vi til størrelsesinnstillingene og endrer bredden.
- Bredde: 30%
Mellomrom
Vi vil gjøre modulen om til en firkant ved å legge til litt topp polstring også.
- Topp polstring: 30%
Legg til rad 2
Kolonnestruktur
På neste linje. Bruk følgende kolonnestruktur:
dimensjonering
Uten å legge til noen moduler ennå, åpne radinnstillingene og endre størrelsesinnstillingene i designfanen:
- Bruk en tilpasset rennebredde: Ja
- Rennesteinsbredde: 1
- Bredde: 60vw
- Maks bredde: 100%
avstanden
Deretter legger du til en tilpasset toppmarge på forskjellige skjermstørrelser.
- Toppmargin: 20vh (stasjonær), 5vw (nettbrett og telefon)
Kolonne 2 Avstand
Så vil vi åpne innstillingene i kolonne 2 og legge til tilpassede fyllingsverdier.
- Øvre polstring: 2vh (nettbrett og telefon)
- Venstre polstring: 2vw
- Høyre polstring: 2vw
Legg til en bildemodul i kolonne 1
Last opp bilde
Det er på tide å legge til mods, legge til et bildemodus i kolonne 1 og laste opp et bilde du ønsker.
dimensjonering
Vi vil da tvinge full bredde på modulen.
- Tving full bredde: Ja
Legg til tekstmodul 1 i kolonne 2
Legg til H2-innhold
I den andre kolonnen er den første modulen vi trenger en tekstmodul med innhold H2.
H2 tekstinnstillinger
Gå til moduldesignfanen og endre H2-tekstinnstillingene som følger:
- Overskrift 2 Font: Anton
- Element 2 Tekststørrelse: 5vw (stasjonær), 7vw (nettbrett), 9vw (telefon)
Legg til tekstmodul 2 i kolonne 2
Legg til innhold
Legg til en annen tekstmodul rett under rett under den forrige og sett inn innhold av beskrivelsen av ditt valg.
Tekstinnstillinger
Endre modulens tekstinnstillinger som følger:
- Tekstfont: Åpen sans
- Tekststørrelse: 0.8vw (stasjonær), 2vw (nettbrett), 2.5vw (telefon)
- Tekstlinje høyde: 1,8 em
avstanden
Og legg til tilpasset topp- og bunnmargin i avstandsinnstillingene.
- Øvre margin: 2vw
- Bunnmargin: 2vw
Legg til en knappmodul i 2-kolonnen
Legg til en kopi
Den neste og siste modulen vi trenger i denne kolonnen er en knappmodul. Legg til en kopi av ditt valg.
Knappinnstillinger
Stil knappen deretter:
- Bruk egendefinerte stiler for knappen: Ja
- Knapptekststørrelse: 1vw (skrivebord), 2vw (nettbrett), 3vw (telefon)
- Tekstfarge på knapp: # 333333
- Knapp kantfarge: # 333333
- Knappradius: 1px
- Knappeskrift: Anton
- Knapp Font Style: Store bokstaver
avstanden
Og fullfør modulinnstillingene ved å legge til en tilpasset verdi basert på skjermstørrelser.
- Høy intern margin: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
- Lav intern margin: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
- Venstre intern margin: 3vw (stasjonær), 5vw (nettbrett), 7vw (telefon)
- Høyre internettmargin: 3vw (stasjonær), 5vw (nettbrett), 7vw (telefon)
2. Legg til rulleeffekter til forskjellige elementer
Tekstmodul på linje 1
Vertikal animasjon
Når alle elementene er på plass, er det på tide å legge til rulleeffektene. Åpne tekstmodulen i din første rad og bruk litt vertikal bevegelse.
- Aktiver vertikal bevegelse: Ja
- Start offset: 4
- Midt offset: 0
- Avsluttende forskyvning: -4
- Motion Effect Trigger: Middle of Element
Linje nr. 2
Kolonne 1
Horisontal animasjon
Åpne deretter den første kolonnen på din andre rad og legg til en horisontal bevegelse.
- Aktiver horisontal bevegelse: Ja
- Start offset: -3
- Gjennomsnittlig forskyvning: 0 (fra 40% til 60%)
- Sluttforskyvning: -3
- Trigger bevegelseseffekt: midten av elementet
Fade inn og ut
Vi bruker også en fade in og fade out effekt på den samme kolonnen.
- Aktiver fade inn og ut: Ja
- Opprinnelig opacitet: 0%
- Gjennomsnittlig opacitet: 100%
- Slutt uklarhet: 100%
- Trigger bevegelseseffekt: midten av elementet
Kolonne 2
Horisontal bevegelse
Så vil vi åpne parametrene i den andre kolonnen og anvende følgende horisontale bevegelsesparametere:
- Aktiver horisontal bevegelse: Ja
- Start offset: 3
- Gjennomsnittlig forskyvning: 0 (fra 40% til 60%)
- Sluttforskyvning: 3
- Trigger bevegelseseffekt: midten av elementet
Fade inn og ut
Med en innkommende og utgående falming.
- Aktiver fade inn og ut: Ja
- Opprinnelig opacitet: 0%
- Gjennomsnittlig opacitet: 100%
- Slutt uklarhet: 100%
- Trigger bevegelseseffekt: midten av elementet
4. Gjenbruk den første delen
Klone seksjon fire ganger
Når du har fullført den første delen og rulleeffektene, kan du klone den så mange ganger du vil.
Endre bakgrunnsfargene til alle andre seksjoner
Vi vil endre bakgrunnsfargen på alle de andre delene.
- Bakgrunnsfarge: # 111111
5. Legg til CSS-kode for å aktivere rullefangst på HTML-side
Legg til en kodemodul til den siste delen av siden
Nå for å aktivere rulleopptak på sidens HTML, skal vi legge til en kodemodul hvor som helst i den siste delen av siden vår.
Sett inn HTML CSS-kode
Disse linjene med CSS-kode vil hjelpe oss med å bruke rullejusteringen på sidens HTML-kode:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Legg til Scroll Snapping Start i topptekst og bunntekst
Vi vil sørge for at topptekst og bunntekst også er rullefangstpunkter (akkurat som seksjonene våre) ved å legge til følgende linjer med CSS-kode:
topptekst, bunntekst {scroll-snap-align: start;}
Fullfør
I denne artikkelen har vi vist deg hvordan du lager jevne animasjoner ved å kombinere rulling snap med Divis innebygde bevegelseseffekter. Dette er en fin måte å aktivere rulleeffekter med bare en rulle.
Rullfangst hjelper Besøkende for å enkelt bla gjennom de forskjellige delene av din nettstedet Web. Vi kombinerte det med en seksjonsdesign i full høyde. Du var også i stand til å laste ned JSON-filen gratis! Hvis du har spørsmål eller forslag, legg gjerne igjen en kommentar i kommentarfeltet nedenfor.
