Door naar hoofdmenu

Hoe een geanimeerde teller toe te voegen aan het scrollen op Divi

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Geanimeerde nummertellers zijn populair op internet als een manier om numerieke gegevens weer te geven om de waarde van services, casestudy's, enz. Te benadrukken. 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 digitale tellers kunt maken die animeren tijdens het scrollen met Divi. Met behulp van Divi's positie-opties en scroll-effecten gaan we een eenvoudige lay-out ontwerpen om een ​​datum weer te geven met scrollende cijfers.

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.

Registreer een divi-sectiemodule

Voeg vervolgens een nieuwe tekstmodule toe aan de regel.

Werk de inhoud van de tekstmodule bij met het volgende:

Bewaar de datum
Bewaar de datum 1

Werk vervolgens de koptekststijl als volgt bij:

  • Lettertype 2: Prata
  • Item 2 Tekstgrootte: 130 px (desktop), 70 px (tablet), 40 px (telefoon)
Divi titelwijziging

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
Divi grensconfiguratie

Kolomparameters

Open vervolgens de kolominstellingen en werk de vulling als volgt bij:

  • Vulling (bureau): 100px laag
  • Vulling (tablet en telefoon): 0 px laag
Divi kolomafstand configuratie

Voeg een tekstmodule toe

Voeg vervolgens een tekstmodule toe aan de kolom.

Voeg een divi-tekstmodule toe

Inhoud / label

Voeg voor de inhoud van de tekstmodule het woord "maand" toe.

Specificeer de maand divi

Instellingen voor tekstontwerp

Werk na het toevoegen van inhoud de ontwerpinstellingen als volgt bij:

  • 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:

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

  • Positie: relatief
  • Z index 1
Prata wordpress module

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.

Voeg een verteller-tekstmodule toe

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".

Divi-nummermodule toevoegen

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
Divi kleurconfiguratie

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
Configuratie van divi-tekst van de animatiemodule

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.

Dubbele divi 1 tekstmodule

Nummer / inhoud bijwerken

Open de parameters van de tweede digitale tekstmodule en werk de inhoud bij met het nummer "02".

Sla nummer 2 divi

Positie bijwerken

Werk vervolgens de positieopties als volgt bij:

  • Positie: Absoluut
  • Verticale offset: 126 px
Positie van divi-tekstmodule wijzigen

Scroleffecten bijwerken

Werk vervolgens de scrolleffecten als volgt bij:

Werk op het tabblad Verticale beweging het volgende bij:

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

  • 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%)
Animatie scrolleffect divi

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.

Dubbel tekstmodule nummer 3

Nummer / inhoud bijwerken

Werk de inhoud bij met het nummer "03".

Wijzig de divi-tekstmodule

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%)
Bewerk tekstmodule-animatie

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.

Dubbele tekstmodule divi nummer 4

Nummer / inhoud bijwerken

Werk de inhoud bij met het nummer "04".

Configureer de waarde van de divi-tekstmodule

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%)
Animatie configuratiemodule 4 divi

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.

Voeg divi-scheidingsmodule toe

Selecteer vervolgens NEE om het scheidingsteken weer te geven.

Geef het scheidingsteken niet weer

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.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

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 hele kolom divi

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

Final gedachten

Deze eenvoudige lay-out met geanimeerde, scrollende nummertellers zou handig moeten zijn voor het weergeven van digitale gegevens op een nieuwe en unieke manier. Aarzel niet om het concept van de datum te verlaten en de tellers te gebruiken voor alles waar u van kunt dromen!

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
0 aandelen
aandeel
gekwetter
Enregistrer