Samenvatting
Met scroll-effecten laat je elementen animeren terwijl een bezoeker door je pagina scrollt. Denk aan tekst die van onder het scherm omhoog schuift, of een achtergrondafbeelding die langzamer mee-scrollt dan de rest van de pagina (dat heet parallax). Dit voegt visuele diepte toe en trekt de aandacht op het juiste moment.
Hoe werkt het
Waar vind je de instellingen?
- Selecteer een element in de editor
- Ga naar de tab Instellingen in het rechter paneel
- Scroll naar de sectie met scroll-gerelateerde opties
Scrollsnelheid (parallax)
Met de scrollsnelheid bepaal je hoe snel een element mee-scrollt ten opzichte van de rest van de pagina.
- Lage waarde = het element scrollt langzamer mee dan de pagina. Dit geeft een diepte-effect — het lijkt alsof het element "verder weg" is.
- 100% = normaal scrollen, net als de rest van de pagina
- Hogere waarde = het element scrollt juist sneller mee
Scroll-animaties (effecten)
Je kunt een animatie kiezen die afspeelt zodra het element in beeld scrollt:
| Effect | Wat doet het? |
|---|---|
| Geen | Geen animatie — het element staat gewoon op zijn plek |
| Infaden | Het element verschijnt geleidelijk (van onzichtbaar naar zichtbaar) |
| Inschuiven van links | Het element schuift van links het beeld in |
| Inschuiven van rechts | Het element schuift van rechts het beeld in |
| Inschuiven van boven | Het element schuift van boven het beeld in |
| Inschuiven van onder | Het element schuift van onder het beeld in |
| Inzoomen | Het element begint kleiner en groeit naar normaal formaat |
| Uitzoomen | Het element begint groter en krimpt naar normaal formaat |
Effect start
Hiermee bepaal je wanneer het effect begint: als percentage van het scherm (viewport) of in pixels vanaf de rand. Standaard start het effect wanneer de bovenkant van het element halverwege de viewport is, of wanneer het element volledig in beeld is.
Effect terugkeren
- Uit (standaard): het effect speelt één keer af — de eerste keer dat het element in beeld scrollt
- Aan: het effect speelt opnieuw af elke keer dat het element in beeld komt, ook als je terugscrolt
Wat is het verschil met overgangen?
| Scroll-effect | Overgang | |
|---|---|---|
| Wanneer speelt het af? | Als een element in beeld scrollt | Bij hover of een andere statuswijziging |
| Waar stel je het in? | In de Instellingen-tab | In de Overgangen-tab |
| Herhaalbaar? | Optioneel (via Effect terugkeren) | Speelt altijd opnieuw bij de trigger |
Tips
- Infaden is het meest subtiele en professionele effect — gebruik het voor een nette pagina-opbouw
- Gebruik Inschuiven van links en Inschuiven van rechts voor twee kolommen naast elkaar — dat geeft een mooi symmetrisch effect
- Gebruik Scrollsnelheid (parallax) alleen op achtergronden of decoratieve elementen, niet op tekst. Parallax-tekst is moeilijk leesbaar.
- Test altijd op mobiel — scroll-animaties kunnen op kleine schermen anders aanvoelen of storend zijn
Wanneer gebruik je dit
- Je wilt elementen laten animeren als ze in beeld scrollen
- Je wilt een parallax-effect toevoegen aan achtergronden of decoratieve elementen
- Je zoekt uitleg over het verschil tussen scroll-effecten en hover-overgangen
Veelgestelde vragen
Kan ik scroll-effecten en overgangen combineren?
Ja, dat kan. Je kunt een element een scroll-effect geven (zodat het bij scrollen in beeld verschijnt) en tegelijk een overgang instellen (zodat het bij hover van kleur verandert, bijvoorbeeld).
Werken scroll-effecten op mobiel?
Ja, scroll-effecten werken ook op telefoons en tablets. Maar test het altijd even, want op kleine schermen kan het anders aanvoelen.
Wat als mijn parallax-effect er raar uitziet?
Gebruik parallax alleen op decoratieve elementen of achtergronden, niet op tekst of belangrijke content. En houd de snelheidsverschillen subtiel.