Animerade sifferräknare är populära på webben som ett sätt att visa siffror. uppgifter för att lyfta fram värdet av tjänster, fallstudier m.m. Divi har en dedikerad nummerräknare som kan användas för att enkelt generera animerade nummerräknare.
Men i den här handledningen kommer vi att visa dig hur du skapar numeriska räknare som animerar när du rullar med Divi. Använda positionsalternativen och rullningseffekterna för Divi, kommer vi att utforma en enkel layout för att visa ett datum med rullande siffror.
Del 1: Skapa titelsektionen
I den första delen skapar vi en enkel titel för layouten.
Lägg först till en rad med en kolumn i avsnittet.
Lägg sedan till en ny textmodul till raden.
Uppdatera innehåll i textmodulen med följande element:
Spara datumet
Uppdatera sedan rubrikens textstil enligt följande:
- Rubrik 2 typsnitt: Prata
- Artikel 2 Textstorlek: 130 px (skrivbord), 70 px (surfplatta), 40 px (telefon)
Del 2: Skapa räknare med rullande animering
I den här nästa delen skapar vi de tre räknarna som animerar rullningsnumren tills de slutar för att visa ett datum (månad, dag och år). Varje räknare kommer att byggas med totalt 5 textmoduler och en separatormodul. Den första textmodulen fungerar som räknarens etikett (dvs. månad, dag, år). De kommande fyra textmodulerna kommer var och en att innehålla ett annat nummer (pågår) som kommer att animeras vid rullning med hjälp av de vertikala förskjutningarna i Divi. Den nedre separationsmodulen hjälper till att dölja överflödet av siffror.
Så här.
Lägg till en andra rad
Lägg till en ny rad i en kolumn under den befintliga raden.
Linjeinställningar
Innan du lägger till en modul, uppdatera radparametrarna enligt följande:
- Rännbredd: 1
- Polstring: 0px hög, 0px låg
Kolumnparametrar
Öppna sedan kolumninställningarna och uppdatera fyllningen enligt följande:
- Polstring (skrivbord): 100px låg
- Polstring (surfplatta och telefon): 0px låg
Lägg till en textmodul
Lägg sedan till en textmodul i kolumnen.
Innehåll / etikett
Pour le innehåll från textmodulen, lägg till ordet "månad".
Inställningar för textdesign
när väl innehåll läggs till, uppdatera designinställningarna enligt följande:
- Bakgrundsfärg: #ffffff
- Textstilsort: Prata
- Textstorlek: 40px
- Höjd på textrad: 2em
- Bredd: 100%
- Polstring: 20 pixlar längst upp, 20 pixlar längst ner, 20 pixlar till vänster, 20 pixlar till höger
- Nedre kantbredd: 5 st
- Färg på den nedre gränsen: #eeeeee
Placera
Uppdatera sedan placeringsalternativen på följande sätt på den avancerade fliken:
- Position: Relativ
- Z index 1
Lägg till en textmodul för det första numret
När den första textmodulen är på plats kan vi börja lägga till siffrorna som kommer att flyttas på rullningen. För att lägga till det första numret, lägg till en ny textmodul under den befintliga "Månad" textmodulen.
Lägg till nummer / innehåll
Uppdatera sedan textmoduletiketten för att läsa “num1” för enklare referens. Uppdatera sedan innehållet med siffran “01”.
Designinställningar för nummer
Uppdatera följande under fliken Design:
- Textsteckensnitt: Prata
- Text Textfärg: # 8ab2d3
- Texttextstorlek: 70px
- Textbokstavsavstånd: 4px
- Textradhöjd: 1.5em
- Polstring: 20px kvar
OBS: Siffrorna har en textstorlek på 70px och en radhöjd på 1.5 em, vilket innebär att den totala höjden för textmodulen kommer att vara nära 100 px. Detta är viktigt att komma ihåg när vi börjar lägga till vertikala rörelseförskjutningar. Om du till exempel lägger till en vertikal förskjutning av ”1” i textmodulen flyttar textmodulen exakt 100px vilket är textmodulens höjd.
Ruleffekter för första nummer
Lägg till följande rullningseffekter i textmodulen.
Uppdatera följande under fliken Vertikal rörelse:
- Aktivera vertikal rörelse: JA
- Startförskjutning: 1 (vid 10%)
- Genomsnittlig offset: 0 (vid 20%)
- Slutförskjutning: -1 (vid 30%)
Uppdatera följande på fliken Fade In och Fade Out:
- Aktivera fade in och ut: JA
- Initial opacitet: 0% (vid 10%)
- Genomsnittlig opacitet: 100% (vid 20%)
- Slut opacitet: 0% (till 30%)
Se till att ställa in utlösaren för rörelseeffekten högst upp på klippet:
- Motion Effect Trigger: Element Top
Skapa textmodulen för det andra numret
Duplicera det första numret
När det första numret har skapats duplicerar du det för att skapa den andra nummermodulen. Uppdatera sedan etiketten i lagervyn för bättre referens.
Uppdatera nummer / innehåll
Öppna parametrarna för den andra digitala textmodulen och uppdatera innehållet med siffran "02".
Uppdatera position
Uppdatera sedan positionsalternativen enligt följande:
- Position: Absolut
- Vertikal offset: 126px
Uppdatera rullningseffekter
Uppdatera sedan rullningseffekterna enligt följande:
Uppdatera följande på fliken Vertikal rörelse:
- Startförskjutning: 1 (vid 20%)
- Genomsnittlig offset: 0 (vid 30%)
- Slutförskjutning: -1 (vid 40%)
Uppdatera följande på fliken Fade In och Fade Out:
- Initial opacitet: 0% (vid 20%)
- Genomsnittlig opacitet: 100% (vid 30%)
- Slut opacitet: 0% (till 40%)
Skapa en textmodul för det tredje numret
Duplicera det andra numret
Du skapar textmodulen för det tredje numret genom att duplicera textmodulen för det andra numret.
Uppdatera nummer / innehåll
Uppdatera innehållet med siffran "03".
Uppdatera rullningseffekter
Uppdatera sedan rullningseffekterna:
Uppdatera följande på fliken Vertikal rörelse:
- Startförskjutning: 1 (vid 30%)
- Genomsnittlig offset: 0 (vid 40%)
- Slutförskjutning: -1 (vid 50%)
Uppdatera följande på fliken Fade In och Fade Out:
- Initial opacitet: 0% (vid 30%)
- Genomsnittlig opacitet: 100% (vid 40%)
- Slut opacitet: 0% (till 50%)
Skapa en textmodul för det fjärde numret
Tredje duplikatfrågan
För att skapa det fjärde numret för rullningsräknan, kopiera textmodulen för det tredje numret.
Uppdatera nummer / innehåll
Uppdatera innehållet med siffran "04".
Uppdatera rullningseffekter
Uppdatera sedan rullningseffekterna:
Uppdatera följande på fliken Vertikal rörelse:
- Startförskjutning: 1 (vid 40%)
- Genomsnittlig offset: 0 (vid 50%)
- Slutförskjutning: 0 (vid 60%)
Uppdatera följande på fliken Fade In och Fade Out:
- Initial opacitet: 0% (vid 40%)
- Genomsnittlig opacitet: 100% (vid 50%)
- Slut opacitet: 100% (till 60%)
Lägg till en nedre separator
Lägg till en ny separatormodul under den sista textmodulen. Detta kommer att användas för att dölja det undre överflödet av den rullande texten i vyn.
Välj sedan NO för att visa separatorn.
Stil- och positionsinställningar
Uppdatera separatorkonstruktionen enligt följande:
- Bakgrundsfärg: #ffffff
- Bredd: 100%
- Höjd: 100px
- Övre kantbredd: 5px
På fliken Avancerat uppdaterar du följande:
- Inaktivera på: telefon och surfplatta
- Position: Absolut
- Plats: längst ner till vänster
VIKTIGT: Utrymmet som avgränsaren kommer att uppta skapades tidigare genom att lägga till 100 pixlar nedre vaddering i kolumnen. Om du inte lägger till den här stoppningen överlappar avgränsaren siffrorna.
Skapa ytterligare räknare och kolumner
Duplicera kolumn 1 och uppdatera innehållet
För att skapa en ny räknare, duplicera kolumn 1. Detta skapar en andra kolumn med alla element på plats automatiskt.
Då behöver du bara uppdatera innehållet i alla textmoduler med nya texter och nummer.
Duplicera kolumn 2 och uppdatera innehållet
När innehållet i alla textmoduler har uppdaterats i kolumn 2, duplicera kolumn 2 för att skapa en tredje räknare för året. Uppdatera sedan innehållet i varje textmodul efter behov.
Slutresultat
Här är det slutliga resultatet.
Andra resurser
- Hur man använder nummerräknaren på Divi
- Hur man använder den cirkulära räknemodulen på Divi
- Hur man skapar cirkulära räknare som kommer till liv på Divi
Avslutande tankar
Denna enkla layout med rullande animerade sifferräknare borde vara användbar för visning uppgifter digitalt på ett nytt och unikt sätt. Släng gärna datumkonceptet och använd diskarna till allt du kan tänka dig!
