Als je op zoek bent naar een manier om vloeiende animaties te maken met de ingebouwde scrolleffecten van Divi, dan zul je deze tutorial geweldig vinden. We laten je zien hoe je de scroll-snap kunt combineren met Divi's ingebouwde bewegingseffecten om secties op volledige hoogte te creëren waar je in één keer doorheen kunt scrollen.
We beginnen met het maken van de eerste sectie. We zullen deze sectie daarom hergebruiken tijdens het ontwerp van onze pagina. Om scroll-snapping mogelijk te maken, gebruiken we de CSS-scroll-snap-eigenschappen die we toewijzen aan de secties, HTML, koptekst en voettekst van onze pagina.
Mogelijk resultaat
Laten we, voordat we in de tutorial duiken, het resultaat snel bekijken op verschillende schermformaten.
1. Maak een nieuwe pagina en begin met het ontwerpen van de eerste sectie
Voeg een nieuwe pagina toe en schakel over naar Visual Builder
Begin met het toevoegen van een nieuwe pagina. Voer de paginatitel in, publiceer de pagina en schakel over naar Visual Builder.
Sectie-instellingen
sizing
Eenmaal op de nieuwe pagina, open je de sectie die er al staat en verander je de formaatinstellingen.
- Min hoogte: 100vh
Hoofdelement
We voegen ook twee regels CSS-code toe aan de sectie. Deze regels CSS-code zullen ons helpen de sectie om te zetten in een snap-point voor de scroll-snap.
scroll-snap-align: start; scroll-snap-stop: normaal;
zichtbaarheid
Om er zeker van te zijn dat niets buiten de sectiecontainer valt, zullen we de sectieoverlopen verbergen.
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Regel # 1 toevoegen
Kolomstructuur
Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:
sizing
Open, zonder nog modules toe te voegen, de rij-instellingen en wijzig de grootte als volgt:
- Gebruik aangepaste rugmarge: Ja
- Rugmarge breedte: 1
- Breedte: 100%
- Maximale breedte: 100%
Spacing
We verwijderen ook de standaard boven- en ondervulling van de sectie.
- Bovenvulling: 0px
- Bodemvulling: 0px
Positie
En we zullen de rij dienovereenkomstig verplaatsen:
- Positie: Absoluut
- Locatie: midden onder
Voeg tekstmodule toe aan kolom
Laat het inhoudsvak leeg
De enige module die we in deze rij nodig hebben, is een tekstmodule. Zorg ervoor dat u het inhoudsvak van de module leeg laat.
Achtergrond kleur
Wijzig vervolgens de achtergrondkleur.
- Achtergrondkleur: # ffee00
Tekstinstellingen
We zullen ook de hoogte van de tekstregel van de module verwijderen.
- Tekstregelhoogte: 1em
Afmetingen
Vervolgens gaan we naar de maatinstellingen en wijzigen we de breedte.
- Breedte: 30%
Spacing
We zullen de module in een vierkant veranderen door ook wat opvulling aan de bovenkant toe te voegen.
- Bovenste vulling: 30%
Rij 2 toevoegen
Kolomstructuur
Op de volgende regel. Gebruik de volgende kolomstructuur:
sizing
Zonder nog modules toe te voegen, opent u de rij-instellingen en wijzigt u de maatinstellingen in het ontwerp-tabblad:
- Gebruik een aangepaste gootbreedte: Ja
- Dakgootbreedte: 1
- Breedte: 60vw
- Max breedte: 100%
tussenruimte
Voeg vervolgens een aangepaste bovenmarge toe op verschillende schermformaten.
- Bovenmarge: 20vh (desktop), 5vw (tablet en telefoon)
Kolom 2 spatiëring
Vervolgens openen we de instellingen in kolom 2 en voegen we aangepaste vulwaarden toe.
- Bovenste padding: 2vh (tablet en telefoon)
- Vulling links: 2vw
- Vulling rechts: 2vw
Voeg een afbeeldingsmodule toe aan kolom 1
Afbeelding uploaden
Het is tijd om mods toe te voegen, een afbeeldingsmodificatie toe te voegen aan kolom 1 en een afbeelding naar keuze te uploaden.
sizing
We zullen dan de volledige breedte op de module forceren.
- Forceer volledige breedte: Ja
Voeg tekstmodule # 1 toe aan kolom 2
Voeg H2-inhoud toe
In de tweede kolom is de eerste module die we nodig hebben een tekstmodule met inhoud H2.
H2 tekstinstellingen
Ga naar het tabblad moduleontwerp en wijzig de H2-tekstinstellingen als volgt:
- Lettertype 2: Anton
- Item 2 Tekstgrootte: 5vw (desktop), 7vw (tablet), 9vw (telefoon)
Voeg tekstmodule # 2 toe aan kolom 2
Voeg inhoud toe
Voeg nog een tekstmodule toe net onder, net onder de vorige, en plaats de inhoud van de beschrijving van uw keuze.
Tekst instellingen
Wijzig de tekstinstellingen van de module als volgt:
- Tekstlettertype: Open Sans
- Tekstgrootte: 0.8vw (desktop), 2vw (tablet), 2.5vw (telefoon)
- Tekstregelhoogte: 1,8 em
tussenruimte
En voeg een aangepaste boven- en ondermarge toe aan de afstandsinstellingen.
- Bovenmarge: 2vw
- Ondermarge: 2vw
Voeg een knopmodule toe aan de 2-kolom
Voeg een kopie toe
De volgende en laatste module die we nodig hebben in deze kolom is een knopmodule. Voeg een kopie naar keuze toe.
Knop instellingen
Stijl de knop dienovereenkomstig:
- Gebruik aangepaste stijlen voor de knop: Ja
- Tekstgrootte knop: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Knoptekstkleur: # 333333
- Knoprandkleur: # 333333
- Knoopradius: 1px
- Knoplettertype: Anton
- Knop lettertypestijl: hoofdletters
tussenruimte
En voltooi de module-instellingen door een aangepaste waarde toe te voegen op basis van schermformaten.
- Hoge interne marge: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Lage interne marge: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Linker interne marge: 3vw (desktop), 5vw (tablet), 7vw (telefoon)
- Rechter internetmarge: 3vw (desktop), 5vw (tablet), 7vw (telefoon)
2. Voeg scroll-effecten toe aan verschillende elementen
Tekstmodule in regel # 1
Verticale animatie
Zodra alle elementen op hun plaats zitten, is het tijd om de scroll-effecten toe te voegen. Open de tekstmodule in je eerste rij en gebruik wat verticale beweging.
- Verticale beweging inschakelen: Ja
- Startoffset: 4
- Midden-offset: 0
- Offset beëindigen: -4
- Motion Effect Trigger: midden van element
Lijn 2
Kolom 1
Horizontale animatie
Open vervolgens de eerste kolom van je tweede rij en voeg een horizontale beweging toe.
- Activeer horizontale beweging: Ja
- Start offset: -3
- Gemiddelde offset: 0 (van 40% tot 60%)
- Einde offset: -3
- Trigger motion effect: midden van element
Vervagen in en uit
We passen ook een fade in en fade out toe op diezelfde kolom.
- Fade in en out activeren: Ja
- Aanvankelijke dekking: 0%
- Gemiddelde dekking: 100%
- Einddekking: 100%
- Trigger motion effect: midden van element
Kolom 2
Horizontale beweging
Vervolgens openen we de parameters van de tweede kolom en passen we de volgende horizontale bewegingsparameters toe:
- Activeer horizontale beweging: Ja
- Start offset: 3
- Gemiddelde offset: 0 (van 40% tot 60%)
- Eindoffset: 3
- Trigger motion effect: midden van element
Vervagen in en uit
Met een inkomend en uitgaand vervagingseffect.
- Fade in en out activeren: Ja
- Aanvankelijke dekking: 0%
- Gemiddelde dekking: 100%
- Einddekking: 100%
- Trigger motion effect: midden van element
4. Hergebruik de eerste sectie
Kloon sectie vier keer
Als je het eerste gedeelte en de scrolleffecten hebt voltooid, kun je het zo vaak klonen als je wilt.
Verander de achtergrondkleuren van alle andere secties
We zullen de achtergrondkleur van alle andere secties wijzigen.
- Achtergrondkleur: # 111111
5. Voeg CSS-code toe om scrollen op pagina-HTML mogelijk te maken
Voeg een codemodule toe aan het laatste gedeelte van de pagina
Om scrollen vast te leggen in de HTML van onze pagina, gaan we ergens in het laatste gedeelte van onze pagina een codemodule toevoegen.
Voeg HTML CSS-code in
Deze regels CSS-code helpen ons de scroll-uitlijning toe te passen op de HTML-code van onze pagina:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Voeg Scroll Snapping Start toe aan Koptekst en Voettekst
We zorgen ervoor dat onze kop- en voettekst ook scrolvastlegpunten zijn (net als onze secties) door ook de volgende regels CSS-code toe te voegen:
koptekst, voettekst {scroll-snap-align: start;}
Voltooien
In dit artikel hebben we je laten zien hoe je vloeiende animaties kunt maken door scrolling snap te combineren met de ingebouwde bewegingseffecten van Divi. Dit is een geweldige manier om scrolleffecten te activeren met slechts één scroll.
Scroll capture helpt bezoekers om moeiteloos door de verschillende delen van uw Site web. We hebben het gecombineerd met een sectieontwerp op volledige hoogte. Je kon het JSON-bestand ook gratis downloaden! Als u vragen of suggesties heeft, kunt u een opmerking achterlaten in het opmerkingengedeelte hieronder.
