Om du letar efter ett sätt att skapa smidiga animationer med Divis inbyggda rullningseffekter kommer du att älska den här handledningen. Vi visar hur du kombinerar bläddringsfästet med Divis inbyggda rörelseeffekter för att skapa sektioner i full höjd som du kan bläddra igenom på en gång.
Vi börjar med att skapa det första avsnittet. Vi kommer därför att återanvända detta avsnitt genom hela utformningen av vår sida. För att aktivera rullning av snappning använder vi CSS-rullningsegenskaperna som vi tilldelar sektionerna, HTML, sidhuvud och sidfot på vår sida.
Möjligt resultat
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
1. Skapa en ny sida och börja utforma det första avsnittet
Lägg till en ny sida och växla till Visual Builder
Börja med att lägga till en ny sida. Ange sidrubriken, publicera sidan och byt till Visual Builder.
Avsnitt inställningar
dimensionering
Väl inne på den nya sidan öppnar du avsnittet som redan finns där och ändrar storlekinställningarna.
- Min höjd: 100vh
Huvudelementet
Vi lägger också till två rader CSS-kod i avsnittet. Dessa rader med CSS-kod hjälper oss att förvandla avsnittet till en snäpppunkt för bläddringsknappen.
rulla-snap-align: start; scroll-snap-stop: normal;
synlighet
För att se till att inget är bortom sektionsbehållaren döljer vi avsnittets överflöd.
- Horisontellt överflöde: dold
- Vertikalt överflöde: dold
Lägg till rad 1
Kolumnstruktur
Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna radinställningarna och ändra storleken på följande sätt:
- Använd anpassad rännbredd: Ja
- Rännbredd: 1
- Bredd: 100%
- Max bredd: 100%
Förband
Vi tar också bort sektionens standard stoppning i topp och botten.
- Topp stoppning: 0px
- Botten stoppning: 0px
Placera
Och vi ska flytta om raden i enlighet därmed:
- Position: Absolut
- Plats: Bottom Center
Lägg till textmodul i kolumnen
Lämna innehållslådan tom
Den enda modulen vi behöver i denna rad är en textmodul. Se till att du lämnar modulens innehållslåda tom.
Bakgrundsfärg
Ändra sedan bakgrundsfärgen.
- Bakgrundsfärg: # ffee00
Textinställningar
Vi tar också bort modulens textradhöjd.
- Textradhöjd: 1em
Storlek
Därefter går vi till storleksinställningarna och ändrar bredden.
- Bredd: 30%
Förband
Vi förvandlar modulen till en fyrkant genom att lägga till lite toppfyllning också.
- Topp stoppning: 30%
Lägg till rad 2
Kolumnstruktur
På nästa rad. Använd följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna radinställningarna och ändra storleksinställningarna på fliken design:
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Bredd: 60vw
- Max bredd: 100%
avstånd
Lägg sedan till en anpassad toppmarginal på olika skärmstorlekar.
- Övre marginal: 20vh (desktop), 5vw (surfplatta och telefon)
Kolumn 2 Avstånd
Sedan öppnar vi inställningarna i kolumn 2 och lägger till anpassade fyllningsvärden.
- Övre stoppning: 2vh (surfplatta och telefon)
- Vänster stoppning: 2vw
- Höger stoppning: 2vw
Lägg till en bildmodul i kolumn 1
Ladda upp bild
Det är dags att lägga till mods, lägga till en bildmod i kolumn 1 och ladda upp en bild efter eget val.
dimensionering
Vi kommer sedan att tvinga fram hela bredden på modulen.
- Tvinga full bredd: Ja
Lägg till textmodul # 1 i kolumn 2
Lägg till H2-innehåll
I den andra kolumnen är den första modulen vi behöver en textmodul med innehåll H2.
H2 textinställningar
Gå till fliken moduldesign och ändra H2-textinställningarna enligt följande:
- Rubrik 2 typsnitt: Anton
- Artikel 2 Textstorlek: 5vw (skrivbord), 7vw (surfplatta), 9vw (telefon)
Lägg till textmodul # 2 i kolumn 2
Lägg till innehåll
Lägg till ytterligare en textmodul precis nedanför den föregående och infoga innehåll av beskrivningen du väljer.
Textinställningar
Ändra modulens textinställningar enligt följande:
- Text teckensnitt: Open Sans
- Textstorlek: 0.8vw (skrivbord), 2vw (surfplatta), 2.5vw (telefon)
- Textradhöjd: 1,8 em
avstånd
Och lägg till anpassad topp- och bottenmarginal i avståndsinställningarna.
- Övre marginal: 2vw
- Nedre marginal: 2vw
Lägg till en knappmodul i 2-kolumnen
Lägg till en kopia
Nästa och sista modul vi behöver i den här kolumnen är en knappmodul. Lägg till en kopia efter eget val.
Knappinställningar
Style knappen i enlighet därmed:
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Knappens textfärg: # 333333
- Knapp kantfärg: # 333333
- Knappradius: 1 st
- Knappsnitt: Anton
- Knappsnittstil: Stor versal
avstånd
Och slutför modulinställningarna genom att lägga till ett anpassat värde baserat på skärmstorlekar.
- Hög intern marginal: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Låg intern marginal: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Vänster intern marginal: 3vw (skrivbord), 5vw (surfplatta), 7vw (telefon)
- Rätt internetmarginal: 3vw (skrivbord), 5vw (surfplatta), 7vw (telefon)
2. Lägg till rullningseffekter till olika element
Textmodul i rad nr 1
Vertikal animering
När alla element är på plats är det dags att lägga till rullningseffekterna. Öppna textmodulen i din första rad och använd en vertikal rörelse.
- Aktivera vertikal rörelse: Ja
- Starta offset: 4
- Mittförskjutning: 0
- Avsluta offset: -4
- Rörelseeffektutlösare: Mitten av elementet
Linje 2
Kolumn 1
Horisontell animering
Öppna sedan den första kolumnen i din andra rad och lägg till en horisontell rörelse.
- Aktivera horisontell rörelse: Ja
- Startförskjutning: -3
- Genomsnittlig offset: 0 (från 40% till 60%)
- Slutförskjutning: -3
- Trigger motion-effekt: mitt i elementet
Tona in och ut
Vi tillämpar också en fade-in och fade-out-effekt på samma kolumn.
- Aktivera fade in och ut: Ja
- Initial opacitet: 0%
- Genomsnittlig opacitet: 100%
- Slut opacitet: 100%
- Trigger motion-effekt: mitt i elementet
Kolumn 2
Horisontell rörelse
Sedan öppnar vi parametrarna i den andra kolumnen och tillämpar följande horisontella rörelseparametrar:
- Aktivera horisontell rörelse: Ja
- Startförskjutning: 3
- Genomsnittlig offset: 0 (från 40% till 60%)
- Slutförskjutning: 3
- Trigger motion-effekt: mitt i elementet
Tona in och ut
Med en inkommande och utgående blekningseffekt.
- Aktivera fade in och ut: Ja
- Initial opacitet: 0%
- Genomsnittlig opacitet: 100%
- Slut opacitet: 100%
- Trigger motion-effekt: mitt i elementet
4. Återanvänd det första avsnittet
Klonavsnitt fyra gånger
När du har slutfört det första avsnittet och dess rullningseffekter kan du klona det så många gånger du vill.
Ändra bakgrundsfärgerna för alla andra avsnitt
Vi kommer att ändra bakgrundsfärgen på alla andra avsnitt.
- Bakgrundsfärg: # 111111
5. Lägg till CSS-kod för att aktivera rullning på HTML-sida
Lägg till en kodmodul till sista delen av sidan
Nu för att möjliggöra rullning av vår sidas HTML kommer vi att lägga till en kodmodul var som helst i det sista avsnittet på vår sida.
Sätt i HTML CSS-kod
Dessa rader med CSS-kod hjälper oss att tillämpa rullningsjusteringen på vår sidas HTML-kod:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Lägg till Scroll Snapping Start till sidhuvud och sidfot
Vi kommer att se till att vår sidhuvud och sidfot också är rullningspunkter (precis som våra avsnitt) genom att också lägga till följande rader med CSS-kod:
sidhuvud, sidfot {scroll-snap-align: start;}
att avsluta
I den här artikeln har vi visat dig hur du skapar smidiga animationer genom att kombinera rullning snap med Divis inbyggda rörelseeffekter. Detta är ett utmärkt sätt att aktivera rullningseffekter med bara en rullning.
Scroll capture hjälper besökare att enkelt bläddra bland de olika delarna av din webbplats. Vi kombinerade det med en sektionsdesign i full höjd. Du kunde också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarsfältet nedan.
