De pagina die over jou (over) praat, is een van de belangrijkste pagina's van je Site web. Hierdoor kunnen mensen je beter leren kennen en beslissen of ze de volgende stap op hun gemak vinden. Als u op zoek bent naar een eenvoudige manier om gesproken tekst op deze pagina op te nemen, zult u deze tutorial geweldig vinden. We gebruiken de scrolleffecten van Divi om een ​​vloeiende verhaalovergang bij het scrollen te creëren. Zodra een deel van het verhaal vervaagt, verschijnt een ander deel. Dit geeft de bezoekers het gevoel een interessant verhaal te lezen. 

Mogelijk eindresultaat

Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.

divi-animatie

1. Maak het eerste volledige schermgedeelte van de pagina

Voeg een nieuw gedeelte toe

Achtergrond kleur

Begin met het toevoegen van een eerste sectie aan uw Over-pagina. Open de sectie-instellingen en verander de achtergrondkleur in zwart.

  • Achtergrondkleur: # 000000
Divi achtergrondsectie

sizing

Draai vervolgens het gedeelte naar volledig scherm door een minimale hoogte toe te voegen aan de parameters voor de grootte.

  • Min hoogte: 100vh
Divi sectie hoogte

2. Voeg een geanimeerde regel toe

Voeg een nieuwe regel toe

Kolomstructuur

Voeg vervolgens een nieuwe rij toe aan uw sectie met behulp van de volgende kolomstructuur:

Voeg een scheidingslijn toe

sizing

Open de lijnparameters en laat de lijn de volledige breedte van de sectiecontainer innemen door de dimensioneringsparameters te wijzigen.

  • Breedte: 100%
  • Max breedte: 100%
Divi maximale breedte configuratie

tussenruimte

Voeg vervolgens links en rechts opvulling toe op verschillende schermformaten.

  • Vulling links: 20vw (bureau), 10vw (tablet en telefoon)
  • Vulling rechts: 20vw (bureau) 10vw (tablet en telefoon)
Pas divi-opvulling aan

Animatie

Om het verteleffect te vergroten, gebruiken we ook een fade-animatie voor de regel.

  • Animatiestijl: vervagen
  • Animatieduur: 3000ms
  • Animatiesnelheidscurve: gemak in uit
  • Animatie herhalen: een keer
Divi sectie animatie

Positie

Ten slotte zullen we ervoor zorgen dat de lijn in het midden van de sectiecontainer wordt geplaatst door de positie-opties te wijzigen.

  • Positie: absoluut
  • Locatie: Centrum
Abolute divi-positie

3. Voeg een titel in met schuifeffecten

Voeg tekstmodule # 1 toe aan de kolom

Voeg H1-inhoud toe

De enige module die we in deze regel nodig hebben is een tekstmodule met inhoud H1.

divi titel ontwerp

Titel 1 Tekstinstellingen

Ga naar het tabblad moduleontwerp en wijzig de H1-tekstinstellingen als volgt:

  • Titel lettertype: Nunito
  • Gewicht lettertype titel: Semi vetgedrukt
  • Kleur koptekst: #ffffff
  • Tekstgrootte koptekst: 7vw (desktop), 9vw (tablet), 11vw (telefoon)
Divi font-configuratie

Verticale beweging

We zullen ook een subtiele verticale animatie toevoegen.

  • Activeer verticale beweging: Ja
  • Start offset: 0 (bij 50%)
  • Gemiddelde offset: 10 (bij 100%)
  • Laatste offset: 10
Divi-tekstanimatie

Inkomend en uitgaand scroleffect

Met een inkomend en uitgaand vervagingseffect.

  • Fade in en out activeren: Ja
  • Aanvankelijke dekking: 100%
  • Gemiddelde dekking: 100% (bij 55%)
  • Einddekking: 0% (tot 62%)
Selectie animatie dekking

Het scrolleffect op en neer schalen

Last but not least gebruiken we ook een scroleffect op schaal omhoog en omlaag.

  • Schalen op en neer inschakelen: Ja
  • Startschaal: 100% (tot 40%)
  • Gemiddelde schaal: 95% (tot 74%)
  • Eindschaal: 90%
Divi-animatietekst

4. Kloon een hele sectie eenmaal en neem een ​​beschrijvende tekst op met scrolleffecten

Bewerk titel en inhoud

Nadat u het eerste gedeelte heeft voltooid, kunt u het volledig klonen. Open de tekstmodule in de dubbele sectiecontainer en gebruik een H2-kopie.

Sectie gedupliceerd div

Wijzig de tekstparameters van de H2 Text-module

Wijzig de H2-tekstinstellingen dienovereenkomstig:

  • Titel 2 Politie: Nunito
  • Titel 2 van het lettertype: semi-vetgedrukt
  • Item 2 Tekstkleur: #ffffff
  • Item 2 Tekstgrootte: 5vw (desktop), 7vw (tablet), 8vw (telefoon)
  • Hoogte van lijn 2: 1em (kantoor), 1.2em (tablet en telefoon)
verhaal op rol

Voeg tekstmodule # 2 toe aan de kolom

Voeg inhoud toe

Voeg vervolgens nog een tekstmodule toe aan de kolom met a inhoud beschrijving van uw keuze.

verhaal op rol

Tekst instellingen

Wijzig de tekstinstellingen voor de tekstmodule als volgt:

  • Tekstlettertype: Open Sans
  • Tekstkleur: #ffffff
  • Tekstgrootte: 1vw (desktop), 2.5vw (tablet), 3vw (telefoon)
  • Hoogte tekstregel: 3.1em (bureau), 2.5em (tablet en telefoon)
verhaal op rol

tussenruimte

Gebruik ook een bovenmarge.

  • Bovenmarge: 8vw
verhaal op rol

Inkomend en uitgaand scroleffect

Schakel vervolgens over naar scrolleffecten in het geavanceerde tabblad en gebruik de volgende instellingen voor fade-in en fade-out:

  • Fade in en out activeren: Ja
  • Aanvankelijke dekking: 100%
  • Gemiddelde dekking: 0% (bij 31%)
  • Einddekking: 0% (tot 35%)
Scrollende animatie divi-tekstmodule

Het scrolleffect op en neer schalen

Voeg ook een op- en neerwaarts effect toe.

  • Schalen op en neer inschakelen: Ja
  • Startschaal: 100% (tot 40%)
  • Gemiddelde schaal: 95% (tot 74%)
  • Eindschaal: 90%
Animatie aanpassing divi tekstmodule

Deze laatste sectie kun je nu zo vaak mogelijk klonen. U zult echter de inhoud van elke sectie voor uw behoeften.

overzicht

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Voorbeeldresultaat

Final gedachten

In dit artikel hebben we u laten zien hoe u een verhaal op uw over-pagina kunt vertellen met behulp van de ingebouwde scrolleffecten van Divi. Door het effect dat we hebben gecreëerd, kan de opeenvolgende kopie in- en uitfaden, waardoor de bezoekers zoals het lezen van een verhaal. Je kon het JSON-bestand ook gratis downloaden! Als u vragen of suggesties heeft, kunt u een opmerking achterlaten in het opmerkingengedeelte hieronder.