Divi scroll effect voorbeelden

by | 14 maart 2021 | Divi tips

In februari 2020 introduceerde Divi de optie ‘Scroll effects’ waamee je elementen op je scherm kunt laten veranderen tijdens het scrollen naar beneden en naar boven.

De veranderende effecten zijn:

  • bewegen van links naar rechts of andersom
  • bewegen van boven naar beneden of andersom
  • van scherp naar onscherp of andersom
  • van onzichtbaar/doorschijnend naar zichtbaar of andersom
  • van klein naar groot of andersom
  • veranderen van draairichting

Ik was blij verrast met deze nieuwe feature en heb deze ook toegepast op de homepage van deze website. Alleen, ik was benieuwd naar andere toepassingen. Wanneer voegen scroll effecten iets toe aan je pagina in combinatie met de inhoud? Ik ging op zoek en maakte hieronder een paar voorbeelden.

Ik ga niet in op de technische kant van scroll effects; er zijn genoeg filmpjes op Youtube die uitleggen hoe deze feature werkt.

1. Tastbaarheid vergroten: De illusie van een stapel kaartjes

Stel je hebt drie diensten, producten of speerpunten die je wilt uitleggen, maar je wilt ze niet als een opsomming met bullets onder elkaar zetten. Bijvoorbeeld omdat alle drie meer aandacht nodig hebben. Als je die drie dingen op kaartjes toont is het meteen duidelijk dat er verschillende mogelijkheden of voordelen zijn. Met een horizontale scroll maak je de kaartjes meteen een stuk tastbaarder en de beweging trekt de aandacht naar de kaartjes toe.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

2. Boodschap versterken: Als het onderwerp over beweging gaat

Met visuele beweging kun je soms de boodschap van een tekst versterken.

Uw pakket wordt binnen 2 werkdagen thuis bezorgd.

3. Tijdreizen: Bewegen door de jaren heen

Wil je een chronologisch verhaal vertellen, dan kan een verticale tijdlijn heel illustratief en helpend zijn.

1974

Bedrijf werd opgericht door Q

1980

Fusie met A werd Q & A

1984

Q & A wint de ‘Goede Antwoorden Prijs’

4. De aandacht van je bezoeker sturen: Focus op belangrijkste

Door omliggende dingen onscherp te maken ga je automatisch kijken naar datgene wat wel scherp is. Zo stuur je waar de bezoeker naar moet kijken. Met andere woorden: richt focus op het belangrijkste.

Maar ik wil dat je hier kijkt.

Want dit is echt een aanbod dat je niet kunt wijgeren.

5. Leeshulp voor je bezoeker: Structureer je tekst met highlights

Dit voorbeeld heeft ook te maken met focussen op een bepaald onderdeel zoals bij punt 4. Alleen gaat het hier om meerder onderdelen die je in structuur aanbiedt.

In onze snoepwinkel: