Het creëren van scroll-effecten met behulp van de Section Divider is een eenvoudige en leuke techniek die uw Site web de ... gebruiken WordPress theme Div. Een sectieverdeler blijft een veelzijdig ontwerpelement, handig om een vleugje creativiteit toe te voegen aan uw overgangen inhoud de pagina.
Maar met de scrolleffecten van Divi worden sectieverdelers nog interessanter! De truc is om een sectie te isoleren die is gewijd aan de gewenste scheidingsstijl. Vervolgens kunt u allerlei door scrollen gegenereerde bewegingen aan de sectie toevoegen om prachtige scrolleffecten als achtergrond voor de sectie te creëren inhoud van de pagina.
Laten we beginnen!
Mogelijk resultaat
Hier is een overzicht van de ontwerpen die we kunnen bereiken na het voltooien van deze tutorial.
Hoe u met Divi geanimeerde scrollende sectiedelers maakt
Creatie van de twee inhoudssecties
Voeg een rij toe
Maak om te beginnen een rij met één kolom in de standaardsectie.
Sectiemarge (voor tests)
Voeg voor testdoeleinden een bovenmarge toe aan de sectie zodat we ruimte hebben om te scrollen. Open de sectie-instellingen en voeg het volgende toe:
- Bovenmarge: 80vh
Voeg een tekstmodule toe
Voeg in de rij van een kolom een nieuwe tekstmodule toe.
Inhoud van de tekstmodule
Binnenkant van inhoud van het lichaam, voeg de volgende H2-kop toe:
<h2>Section Avec Séparateurs</h2>
Tekst module ontwerp
Werk onder de ontwerpinstellingen het volgende bij:
- Tekstlettertype: Roboto
- Uitlijning van de tekst: midden
- Item 2 Tekstkleur: # bae0d8
- Kop 2 Tekstgrootte: 80 px (desktop), 50 px (tablet), 30 px (telefoon)
Voeg een tweede inhoudsgedeelte toe
Voeg onder de vorige sectie een nieuwe reguliere sectie toe.
Voeg een rij toe
Voeg in de nieuwe sectie een rij toe aan een kolom.
Voeg een tekstmodule toe
Voeg vervolgens een nieuwe tekstmodule toe aan de regel.
Tekst module ontwerp
We kunnen de standaard opvulinhoud voorlopig in de body houden. Laten we naar het ontwerptabblad gaan en het volgende bijwerken:
- Tekstlettertype: Roboto
- Tekst tekstkleur: #dddddd
- Tekstgrootte: 16px
- Tekstregelhoogte: 1,5 em
- Tekstuitlijning: links
- Maximale breedte: 400 px
- Uitlijning van de module: midden
Sectie-instellingen
Zorg ervoor dat u de standaard achtergrondkleur van de sectie verwijdert, maar geef deze een volledig transparante achtergrond. Vervolgens kunnen we de bovenste opvulling verwijderen en een ondermarge toevoegen voor scrolltestdoeleinden.
Open hiervoor de sectie-instellingen en werk het volgende bij:
- Achtergrondkleur: rgba (0,0,0,0)
- Ondermarge: 80vh
- Opvulling: 0px
Creatie van het geanimeerde sectiescheidingsteken
Zodra twee inhoudssecties zijn voltooid, zijn we klaar om de sectie voor onze geanimeerde sectiedelers toe te voegen.
Voeg een nieuw gedeelte toe
Ga je gang en maak een nieuwe reguliere sectie in het midden van de twee inhoudssecties.
Context van de sectie
En nogmaals, verwijder de standaard achtergrondkleur van de sectie, maar werk het volgende bij:
- Achtergrondkleur: rgba (0,0,0,0)
Sectie divider ontwerp
Maak je geen zorgen, we creëren onze achtergrondkleur met de sectieverdelers. Om dit te doen, klikt u op het ontwerp-tabblad en voegt u als volgt een bovenste en onderste scheidingslijn toe aan de sectie:
Superieur verdelerontwerp
- Top Divider Style: zie screenshot
- Kleur bovenste verdeler: # 524fbf
- Hoogte van de bovenste verdeler: 20vw
- Horizontale herhaling van de bovenste verdeler: 0,6x
- Flip van de bovenste verdeler: horizontaal
Ontwerp met lagere verdeler
- Stijl onderverdeler: zie screenshot
- Kleur onderste scheidingsteken: # 524fbf
- Hoogte van de onderste verdeler: 20vw
- Horizontale herhaling van de onderste verdeler: 0,5x
- Lagere verdelerhoek: horizontaal en verticaal
Sectiehoogte en opvulling
Aangezien dit gedeelte puur bedoeld is voor het ontwerp van een scheidingswand, kunnen we de hoogte en opvulling verwijderen, zodat alleen de stijl van de scheidingslijn wordt weergegeven en er geen onnodige ruimte tussen de twee inhoudsonderdelen komt. Werk het volgende bij:
- Hoogte: 0px
- Vulling: 0 px hoog, 0 px laag
Scrolleffecten van sectieseparator
Geef de sectie vervolgens de volgende scrolleffecten:
Onder het tabblad Horizontale beweging ...
- Activeer horizontale beweging: JA
We kunnen de standaardinstellingen voor deze behouden op de weergave van de bureau .
Update vervolgens de horizontale bewegingsparameters op de tablette :
- Start offset: 3 (op 0% van het venster)
- Gemiddelde verschuiving: 0 (bij 50% van viewport)
- Einde offset: -3 (bij 100% van viewport)
Onder het tabblad Omhoog en omlaag schalen , update het volgende op de bureau ...
- Startschaal: 200% (bij 0% van het venster)
- Gemiddelde schaal: 150% (bij 45% -65% van viewport)
- Eindschaal: 150% (bij 100% van viewport)
Werk vervolgens het effect Omhoog en omlaag schalen op het tablette als volgt:
- Startschaal: 400% (bij 0% van het raam)
- Gemiddelde schaal: 300% (bij 45% -65% van viewport)
- Eindschaal: 400% (bij 100% van viewport)
De belangrijkste reden waarom we de bewegingseffecten op de tablet (en telefoon) moeten aanpassen, zijn de horizontale bewegingswaarden met behulp van pixellengte-eenheden (d.w.z. 3 = 300 pixels), die absoluut en pas niet aan de breedte van de browser aan.
Laten we nu het eindresultaat bekijken van onze scrollende geanimeerde sectiedeler.
Final gedachten
Het animeren van sectiescheidingen op de scroll is een leuke en effectieve manier om een webpagina tot leven te brengen. Ik hoop dat dit je wat inspiratie geeft om zelf nog creatievere ontwerpen te maken.
