Parallax-diepte-effect
Geeft een pagina diepte door een afbeelding of sectie in een ander tempo mee te laten bewegen met het scrollen — het klassieke parallax-effect.
Geeft je pagina diepte: de inhoud beweegt in een ander tempo dan de rest van de pagina terwijl de bezoeker scrolt. Dit klassieke parallax-effect zie je vaak in hero's en grote fotosecties. De technische naam is GsapParallax.
Gebruik dit block spaarzaam en gericht: één parallax-afbeelding in een hero of tussen twee tekstsecties werkt beter dan een hele pagina vol bewegende lagen. Het effect is het sterkst bij afbeeldingen met een duidelijke voor- en achtergrond, zoals een landschap of productfoto met ruimte eromheen.
Voor een subtieler alternatief dat minder beweging vraagt van de bezoeker, kun je GsapReveal gebruiken — dat laat content verschijnen zonder de doorlopende scrollbeweging van parallax.
Gebruiksscenario's per site-type
Een portfolio- of fotografiesite gebruikt GsapParallax vaak in de hero, met een grote sfeerfoto die net iets langzamer beweegt dan de tekst ervoor — dat geeft meteen een premium eerste indruk. Dit effect wordt vaak toegepast binnen de Hero-sectie bovenaan de pagina, waar de eerste indruk het belangrijkst is. Een webshop kan het effect inzetten op een landingspagina voor een productlancering, met de heldenfoto van het product op de achtergrond. Bij een zakelijke dienstverlener werkt parallax het best tussen twee tekstsecties in, als visuele adempauze, bijvoorbeeld een foto van het team of kantoor.
Veelgemaakte fouten en toegankelijkheid
Een veelgemaakte fout is parallax toepassen op een afbeelding met veel tekst erin, zoals een screenshot met UI-elementen: de beweging maakt kleine tekst lastiger leesbaar tijdens het scrollen. Gebruik dit block bij voorkeur op zuiver beeldmateriaal.
Gebruik voor het beste resultaat een afbeelding die groter is dan het zichtbare kader: parallax verschuift de foto binnen zijn container, en zonder overmaat ontstaan lege randen zodra de beweging in gang komt. Reken op ongeveer twintig procent extra hoogte ten opzichte van de zichtbare sectie.
Houd rekening met bezoekers die bewegingsgevoelig zijn: te veel parallax-secties na elkaar op één pagina kan onprettig aanvoelen. Eén tot twee parallax-momenten per pagina is meestal voldoende voor het gewenste effect. Combineer dit block spaarzaam met GsapReveal — gebruik reveal voor de meeste secties en bewaar parallax voor het ene moment waar het echt indruk moet maken, zoals de hero of een sectie-overgang.
Voorbeeld
De prompt voor dit voorbeeld
Zet deze foto op de pagina met een parallax-effect tijdens het scrollen.