Sidan som talar om dig (om) är en av de viktigaste sidorna på din webbplats. Detta gör att människor kan lära känna dig bättre och bestämma om de är bekväma med att ta nästa steg. Om du letar efter ett enkelt sätt att inkludera berättarröst på den här sidan, kommer du att älska den här handledningen. Vi kommer att använda Divis rullningseffekter för att skapa en smidig berättarövergång vid rullning. Så fort en del av berättelsen bleknar, dyker en annan del upp. Detta ger besökare känslan av att läsa en intressant berättelse. 

Möjligt slutresultat

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

1. Skapa den första helskärmsdelen av sidan

Lägg till en ny sektion

Bakgrundsfärg

Börja med att lägga till ett första avsnitt på din Om-sida. Öppna avsnittsinställningarna och ändra bakgrundsfärgen till svart.

• Bakgrundsfärg: #000000

dimensionering

Rotera sedan sektionen till helskärm genom att lägga till en minimihöjd i storleksinställningarna.

• Min höjd: 100vh

2. Lägg till en animerad rad

Lägg till en ny rad

Kolumnstruktur

Lägg sedan till en ny rad i ditt avsnitt med följande kolumnstruktur:

dimensionering

Öppna linjeinställningarna och låt linjen ta upp hela bredden av sektionsbehållaren genom att ändra storleksinställningarna.

• Bredd: 100%
• Max bredd: 100%

avstånd

Lägg sedan till vänster och höger stoppning på olika skärmstorlekar.

• Vänster stoppning: 20vw (skrivbord), 10vw (surfplatta och telefon)
• Höger stoppning: 20vw (dator) 10vw (surfplatta och telefon)

animering

För att öka berättareffekten kommer vi också att använda en toningsanimation för raden.

• Animationsstil: Fade
• Animeringstid: 3000ms
• Animationshastighetskurva: enkel in-ut
• Animationsupprepning: en gång

Placera

Slutligen ser vi till att linjen är placerad i mitten av sektionsbehållaren genom att ändra positionsalternativen.

• Position: absolut
• Plats: Centrum

3. Infoga titel med rullningseffekter

Lägg till textmodul # 1 i kolumnen

Lägg till H1-innehåll

Den enda modul vi behöver på den här raden är en textmodul med innehåll H1.

Rubrik 1 Textinställningar

Gå till fliken moduldesign och ändra H1-textinställningarna enligt följande:

• Titeltypsnitt: Nunito
• Rubrik Teckensnittsvikt: Halvfet
• Rubriktextfärg: #ffffff
• Rubriktextstorlek: 7vw (skrivbord), 9vw (surfplatta), 11vw (telefon)

Vertikal rörelse

Vi kommer också att lägga till en subtil vertikal animation.

• Aktivera vertikal rörelse: Ja
• Startförskjutning: 0 (vid 50%)
• Genomsnittlig offset: 10 (vid 100%)
• Slutförskjutning: 10

In- och utrullningseffekt

Med en inkommande och utgående blekningseffekt.

• Aktivera fade in och ut: Ja
• Initial opacitet: 100%
• Genomsnittlig opacitet: 100% (vid 55%)
• Slut opacitet: 0% (till 62%)

Skala upp och ned rullningseffekt

Sist men inte minst kommer vi också att använda en skala upp och ned scroll-effekt.

• Aktivera skalning upp och ner: Ja
• Startskala: 100% (till 40%)
• Genomsnittlig skala: 95 % (vid 74 %)
• Slutskala: 90%

4. Klona ett helt avsnitt en gång och inkludera beskrivningstext med rullningseffekter

Redigera titel och innehåll

När du har slutfört det första avsnittet kan du klona det helt. Öppna textmodulen inuti duplikatavsnittsbehållaren och använd en H2-kopia.

Redigera H2 Text-modulens textinställningar

Ändra H2-textinställningarna i enlighet med detta:

• Title 2 Font: Nunito
• Teckensnitt titel 2: halvfet
• Avsnitt 2 Textfärg: #ffffff
• Artikel 2 Textstorlek: 5vw (skrivbord), 7vw (surfplatta), 8vw (telefon)
• Linje 2 höjd: 1 em (dator), 1.2 em (surfplatta och telefon)

Lägg till textmodul # 2 i kolumnen

Lägg till innehåll

Lägg sedan till ytterligare en textmodul i kolumnen med a innehåll beskrivning av ditt val.

Textinställningar

Ändra textmodulens textinställningar enligt följande:

• Textstilsort: Öppna Sans
• Textfärg: #ffffff
• Textstorlek: 1vw (skrivbord), 2.5vw (surfplatta), 3vw (telefon)
• Textradshöjd: 3.1 em (skrivbord), 2.5 em (surfplatta och telefon)

avstånd

Använd även en övre marginal.

• Övre marginal: 8vw

In- och utrullningseffekt

Växla sedan till rullningseffekter på fliken Avancerat och använd följande inställningar för tona in och uttoning:

• Aktivera fade in och ut: Ja
• Initial opacitet: 100%
• Genomsnittlig opacitet: 0% (vid 31%)
• Slutlig opacitet: 0 % (vid 35 %)

Skala upp och ned rullningseffekt

Lägg också till en skala upp och ned effekt.

• Aktivera skalning upp och ner: Ja
• Startskala: 100% (till 40%)
• Genomsnittlig skala: 95 % (vid 74 %)
• Slutskala: 90%

Du kan nu klona det sista avsnittet så många gånger som möjligt. Du måste dock justera innehåll av varje avsnitt för dina behov.

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

Avslutande tankar

I den här artikeln visade vi dig hur du berättar en historia på din Om-sida med hjälp av Divis inbyggda rullningseffekter. Effekten vi skapade gör att den på varandra följande kopian tonas in och ut, vilket ger besökare som att läsa en berättelse. 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.