Geanimeerde nummertellers zijn populair op internet als een manier om nummers weer te geven. donnees om de waarde van diensten, casestudy's, enz. Divi heeft een speciale nummertellermodule die kan worden gebruikt om eenvoudig geanimeerde nummertellers te genereren.
In deze zelfstudie laten we u echter zien hoe u numerieke tellers maakt die animeren bij scrollen met behulp van Divi. Met behulp van de positieopties en scrolleffecten van Divi, zullen we een eenvoudige lay-out ontwerpen om een datum met scrollende cijfers weer te geven.
Deel 1: het titelgedeelte maken
In dit eerste deel maken we een eenvoudige titel voor de layout.
Voeg eerst een rij van één kolom toe aan de sectie.
Voeg vervolgens een nieuwe tekstmodule toe aan de regel.
Update de inhoud van de tekstmodule met de volgende elementen:
Bewaar de datum
Werk vervolgens de koptekststijl als volgt bij:
- Lettertype 2: Prata
- Item 2 Tekstgrootte: 130 px (desktop), 70 px (tablet), 40 px (telefoon)
Deel 2: Creëren van tellers met scrollende animatie
In dit volgende deel maken we de drie tellers die de scrollende cijfers animeren totdat ze stoppen om een datum weer te geven (maand, dag en jaar). Elke teller wordt gebouwd met in totaal 5 tekstmodules en een scheidingsmodule. De eerste tekstmodule zal dienen als het label van de teller (d.w.z. maand, dag, jaar). De volgende vier tekstmodules bevatten elk een ander nummer (in uitvoering) dat tijdens het scrollen wordt geanimeerd met behulp van de verticale verplaatsingsverschuivingen in Divi. De onderste scheidingsmodule helpt de overvloed aan getallen te verbergen.
Hier is hoe.
Voeg een tweede regel toe
Voeg onder de bestaande rij nog een rij toe aan een kolom.
Lijn instellingen
Werk de rijparameters als volgt bij voordat u een module toevoegt:
- Dakgootbreedte: 1
- Vulling: 0 px hoog, 0 px laag
Kolomparameters
Open vervolgens de kolominstellingen en werk de vulling als volgt bij:
- Vulling (bureau): 100px laag
- Vulling (tablet en telefoon): 0 px laag
Voeg een tekstmodule toe
Voeg vervolgens een tekstmodule toe aan de kolom.
Inhoud / label
voor inhoud vanuit de tekstmodule voegt u het woord “maand” toe.
Instellingen voor tekstontwerp
Zodra de inhoud toegevoegd, update dan de ontwerpinstellingen als volgt:
- Achtergrondkleur: #ffffff
- Tekstlettertype: Talk
- Tekstgrootte: 40px
- Hoogte van de regel tekst: 2em
- Breedte: 100%
- Opvulling: 20 pixels bovenaan, 20 pixels onderaan, 20 pixels links, 20 pixels rechts
- Breedte onderrand: 5 px
- Kleur van de onderste rand: #eeeeee
Positie
Werk vervolgens onder het tabblad Geavanceerd de positie-opties als volgt bij:
- Positie: relatief
- Z index 1
Voeg een tekstmodule toe voor het eerste nummer
Zodra de eerste tekstmodule op zijn plaats is, kunnen we beginnen met het toevoegen van de nummers die op de scroll zullen bewegen. Om het eerste nummer toe te voegen, voegt u een nieuwe tekstmodule toe onder de bestaande "Maand" -tekstmodule.
Nummer / inhoud toevoegen
Werk vervolgens het label van de tekstmodule bij om "num1" te lezen voor een betere referentie. Werk vervolgens de inhoud bij met het nummer "01".
Ontwerpinstellingen voor nummer
Werk op het tabblad Ontwerpen het volgende bij:
- Tekstlettertype: Prata
- Tekst Tekstkleur: # 8ab2d3
- Tekst Tekstgrootte: 70px
- Tekstletterafstand: 4px
- Tekstregelhoogte: 1.5em
- Vulling: 20px over
OPMERKING: de cijfers hebben een tekstgrootte van 70px en een regelhoogte van 1.5em, wat betekent dat de totale hoogte van de tekstmodule bijna 100px zal zijn. Dit is belangrijk om in gedachten te houden wanneer we beginnen met het toevoegen van verticale bewegingsverschuivingen. Als u bijvoorbeeld een verticale offset van "1" toevoegt aan de tekstmodule, wordt de tekstmodule exact 100 px verplaatst, wat de hoogte van de tekstmodule is.
Scrolleffecten voor eerste nummer
Voeg de volgende scroll-effecten toe aan de tekstmodule.
Werk onder het tabblad Verticale beweging het volgende bij:
- Verticale beweging inschakelen: JA
- Start offset: 1 (bij 10%)
- Gemiddelde offset: 0 (bij 20%)
- Einde offset: -1 (bij 30%)
Werk op het tabblad Fade In en Fade Out het volgende bij:
- Activeer fade in en out: JA
- Initiële dekking: 0% (bij 10%)
- Gemiddelde dekking: 100% (bij 20%)
- Einddekking: 0% (tot 30%)
Zorg ervoor dat u de trigger voor het bewegingseffect bovenaan de clip instelt:
- Motion Effect Trigger: Element Top
Maak de tekstmodule voor het tweede nummer
Dupliceer het eerste nummer
Zodra het eerste nummer is gemaakt, dupliceert u het om de tweede nummertekstmodule te maken. Werk vervolgens het label in de lagenweergave bij voor een betere referentie.
Nummer / inhoud bijwerken
Open de parameters van de tweede digitale tekstmodule en werk de inhoud bij met het nummer "02".
Positie bijwerken
Werk vervolgens de positieopties als volgt bij:
- Positie: Absoluut
- Verticale offset: 126 px
Scroleffecten bijwerken
Werk vervolgens de scrolleffecten als volgt bij:
Werk op het tabblad Verticale beweging het volgende bij:
- Start offset: 1 (bij 20%)
- Gemiddelde offset: 0 (bij 30%)
- Einde offset: -1 (bij 40%)
Werk op het tabblad Fade In en Fade Out het volgende bij:
- Initiële dekking: 0% (bij 20%)
- Gemiddelde dekking: 100% (bij 30%)
- Einddekking: 0% (tot 40%)
Maak een tekstmodule voor het derde nummer
Dupliceer het tweede nummer
Om de tekstmodule voor het derde nummer te maken, dupliceert u de tekstmodule voor het tweede nummer.
Nummer / inhoud bijwerken
Werk de inhoud bij met het nummer "03".
Scroleffecten bijwerken
Werk vervolgens de scrolleffecten bij:
Werk op het tabblad Verticale beweging het volgende bij:
- Start offset: 1 (bij 30%)
- Gemiddelde offset: 0 (bij 40%)
- Einde offset: -1 (bij 50%)
Werk op het tabblad Fade In en Fade Out het volgende bij:
- Initiële dekking: 0% (bij 30%)
- Gemiddelde dekking: 100% (bij 40%)
- Einddekking: 0% (tot 50%)
Maak een tekstmodule voor het vierde nummer
Derde dubbele kwestie
Om het vierde nummer voor de scrolteller te maken, dupliceert u de tekstmodule voor het derde nummer.
Nummer / inhoud bijwerken
Werk de inhoud bij met het nummer "04".
Scroleffecten bijwerken
Werk vervolgens de scrolleffecten bij:
Werk op het tabblad Verticale beweging het volgende bij:
- Start offset: 1 (bij 40%)
- Gemiddelde offset: 0 (bij 50%)
- Einde offset: 0 (bij 60%)
Werk op het tabblad Fade In en Fade Out het volgende bij:
- Initiële dekking: 0% (bij 40%)
- Gemiddelde dekking: 100% (bij 50%)
- Einddekking: 100% (tot 60%)
Voeg een lager scheidingsteken toe
Voeg onder de laatste tekstmodule een nieuwe scheidingsmodule toe. Dit wordt gebruikt om de onderste overloop van de scrollende tekst in beeld te verbergen.
Selecteer vervolgens NEE om het scheidingsteken weer te geven.
Stijl- en positie-instellingen
Werk het scheidingsontwerp als volgt bij:
- Achtergrondkleur: #ffffff
- Breedte: 100%
- Hoogte: 100px
- Breedte bovenrand: 5px
Werk op het tabblad Geavanceerd het volgende bij:
- Deactiveren op: telefoon en tablet
- Positie: Absoluut
- Locatie: linksonder
BELANGRIJK: De ruimte die het scheidingsteken inneemt, is eerder gemaakt door 100 pixels opvulling aan de onderkant toe te voegen aan de kolom. Als u deze opvulling niet toevoegt, overlapt het scheidingsteken de cijfers.
Creatie van extra tellers en kolommen
Dupliceer kolom 1 en werk de inhoud bij
Om een nieuwe teller te maken, dupliceert u kolom 1. Hierdoor wordt automatisch een tweede kolom gemaakt met alle elementen op hun plaats.
Het enige dat u hoeft te doen, is de inhoud van alle tekstmodules bijwerken met nieuwe teksten en nummers.
Dupliceer kolom 2 en werk de inhoud bij
Zodra de inhoud van alle tekstmodules is bijgewerkt in kolom 2, dupliceert u kolom 2 om een derde teller voor het jaar te maken. Werk vervolgens de inhoud van elke tekstmodule indien nodig bij.
Eindresultaat
Hier is het eindresultaat.
Andere bronnen
- Hoe de nummerteller module op Divi te gebruiken
- Het gebruik van de ronde tellermodule op Divi
- Hoe u ronde tellers maakt die tot leven komen op Divi
Final gedachten
Deze eenvoudige lay-out met scrollende geanimeerde nummertellers zou handig moeten zijn voor weergave donnees digitaal op een nieuwe en unieke manier. Voel je vrij om het datumconcept achterwege te laten en de tellers te gebruiken voor alles wat je maar kunt bedenken!
