Parallax: mooi in een presentatie, lastig in de praktijk
Rond 2013 stond het op elke website. Je scrolde en de achtergrond bewoog trager dan de tekst, waardoor er diepte ontstond. Het was nieuw, het viel op en iedereen wilde het. Tien jaar later kom ik het nog steeds tegen. Meestal op sites die sindsdien niet zijn aangeraakt.
Dat is geen toeval. Het effect is duurder dan het lijkt en het levert minder op dan gedacht.
Dat betekent niet dat het nooit kan. Subtiel toegepast op een enkele plek werkt het prima.
De vraag die ik stel is altijd dezelfde: wat wordt je bezoeker hier wijzer van? Als het antwoord alleen esthetisch is, weegt het zelden op tegen de kosten.
Een effect dat indruk maakt in een presentatie en zelden in de praktijk.
Wat is parallax?
Parallax is een scrolleffect waarbij achtergrond en voorgrond met verschillende snelheid bewegen. Daardoor lijkt de achtergrond verder weg te liggen.
Het woord komt uit de sterrenkunde. Het beschrijft hoe een voorwerp lijkt te verschuiven als je beweegt. Kijk uit een rijdende trein en je ziet hetzelfde: het weiland vliegt voorbij, de horizon staat stil.
Hoe het gemaakt wordt
Tegenwoordig kan het met CSS alleen. Dat is een stuk lichter dan de oude aanpak met JavaScript die bij elke scrollbeweging iets berekende.
Draait er op jouw site nog zo’n oude oplossing? Dan is dat een reden om te kijken.
Wat het kost
Drie dingen, en de eerste is de meest zichtbare.
Een parallaxsectie vraagt vaak een grote achtergrondafbeelding. Die telt zwaar mee in je laadtijd, zeker als hij boven in beeld staat.
Daarnaast kost het rekenkracht tijdens het scrollen. Op een oudere telefoon zie je dat terug als haperen.
En het maakt je pagina langer. Elke sectie met dit effect neemt meer schermhoogte in dan nodig. Je bezoeker moet dus verder scrollen naar je knop. Meer daarover lees je bij pagespeed.
Op mobiel
Daar werkt het vaak niet, en dat is bewust. Veel browsers op een telefoon voeren dit effect niet uit om batterij te sparen.
Je krijgt dan een gewone achtergrond te zien. Dat is meestal prima, maar controleer wel of je ontwerp daar nog klopt.
Bij de weergave op mobiel valt de tekst dan regelmatig over een verkeerd deel van de foto.
Wat ik controleer bij dit effect
Wordt de bewegingsinstelling van het besturingssysteem gerespecteerd?
Klopt de tekst nog als het effect wegvalt op een telefoon?
Hoe zwaar is de achtergrondafbeelding?
Hapert het scrollen op een ouder toestel?
Die eerste is de belangrijkste en kost een paar regels code.
Toegankelijkheid
Dit is de kant die het vaakst wordt overgeslagen. Beweging op een scherm veroorzaakt bij sommige mensen echt klachten.
Duizeligheid, misselijkheid of hoofdpijn. Dat geldt vooral bij een vestibulaire aandoening. Dat is een grotere groep dan je denkt.
Er is een instelling in elk besturingssysteem waarmee iemand aangeeft minder beweging te willen. Bij bewegingsgevoeligheid hoor je die instelling te respecteren en het effect uit te zetten. Meer daarover lees je bij accessibility.
Wanneer het wel werkt
Subtiel en op een plek. Een lichte dieptewerking in je hero kan een pagina karakter geven.
Wat niet werkt is een hele pagina vol met secties waar de achtergrond die meebeweegt. Dan wordt scrollen zelf een prestatie.
Waar het vandaan komt in je thema
Vaak heeft niemand ooit besloten dat dit effect er moest komen. Het zat gewoon in het thema of in een sjabloon van de paginabouwer.
Dat is al een reden om te kijken of het nog past bij je site van nu.
Meet het verschil
Haal het effect een keer weg op een kopie en vergelijk je laadtijd. Draait er nog een oude oplossing met scripts, dan is de winst vaak groot.
Met moderne opmaak valt het mee. Dan blijft alleen de vraag over of je bezoeker er iets aan heeft.
Kies dus voor een accent en niet voor een thema. Dat is de kortste samenvatting van dit hele onderwerp.
Meer vragen over Parallax
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is parallax?
Wanneer werkt een parallax-effect?
Is parallax slecht voor je laadtijd?
Werkt parallax op mobiel?
Wat doet parallax voor de toegankelijkheid?
Is parallax nog van deze tijd?
Wat is parallax?
Het kost je op drie manieren, en de eerste is de meest zichtbare.
Een parallaxsectie vraagt vaak een grote achtergrondafbeelding. Die telt zwaar mee, zeker als hij boven in beeld staat en dus het eerste is wat geladen moet worden.
Daarnaast kost het rekenkracht tijdens het scrollen. Op een oudere telefoon zie je dat terug als haperen bij elke beweging.
En het maakt je pagina langer. Elke sectie met dit effect neemt meer schermhoogte in dan nodig, waardoor je bezoeker verder moet scrollen naar je knop.
Tegenwoordig kan het effect met alleen opmaak, en dat is een stuk lichter dan de oude aanpak met scripts. Draait er op jouw site nog zo’n oude oplossing, dan is dat een reden om ernaar te kijken. Meer daarover lees je bij pagespeed.
Meet je laadtijd met en zonder het effect. Draait er nog een oude oplossing met scripts, dan is de winst van het verwijderen vaak groot.
Met moderne opmaak is het effect een stuk lichter dan tien jaar geleden.
Is parallax slecht voor je laadtijd?
Parallax is een scrolleffect waarbij achtergrond en voorgrond met verschillende snelheid bewegen. Daardoor lijkt de achtergrond verder weg te liggen.
Het woord komt uit de sterrenkunde en beschrijft hoe een voorwerp lijkt te verschuiven als je je hoofd beweegt.
Kijk uit een rijdende trein en je ziet hetzelfde. Het weiland vliegt voorbij, de horizon staat vrijwel stil. Dat verschil in snelheid geeft je het gevoel van diepte.
Rond 2013 stond het op elke website. Het was nieuw, het viel op en iedereen wilde het.
Tien jaar later kom ik het nog steeds tegen, meestal op sites die sindsdien niet meer zijn aangeraakt. Dat is geen toeval: het effect is duurder dan het lijkt en het levert minder op dan gedacht.
Kijk of dit effect op jouw site staat en of iemand ooit heeft besloten dat het er moest komen. Vaak zat het gewoon in het thema.
Dat is op zichzelf al een reden om te kijken of het nog past bij hoe je site nu gebruikt wordt.
Werkt parallax op mobiel?
Vaak niet, en dat is bewust zo gemaakt.
Veel browsers op een telefoon voeren dit effect niet uit om batterij en rekenkracht te sparen. Je krijgt dan gewoon een vaste achtergrond te zien.
Dat is meestal prima. Controleer wel of je ontwerp daar nog klopt, want dat wordt zelden nagekeken.
Ik zie regelmatig dat de tekst dan over een verkeerd deel van de foto valt. Wat op desktop mooi boven een donker stuk stond, staat op mobiel ineens op een lichte lucht.
Test je pagina dus op een echt toestel en niet in het venster van je browser. Daar zie je het verschil pas.
Test je pagina op een echt toestel en niet in het venster van je browser. Het effect valt op mobiel vaak weg.
Controleer dan of je tekst nog over het juiste deel van de foto staat, want dat wordt zelden nagekeken. Doe die controle ook staand en liggend, want dat scheelt in de uitsnede.
Wat doet parallax voor de toegankelijkheid?
Dit is de kant die het vaakst wordt overgeslagen, en hij is belangrijker dan de laadtijd.
Beweging op een scherm veroorzaakt bij sommige mensen echt klachten. Duizeligheid, misselijkheid of hoofdpijn.
Dat geldt vooral voor mensen met een vestibulaire aandoening, en dat is een grotere groep dan je zou denken. Voor hen is een pagina vol beweging simpelweg onbruikbaar.
Er is een instelling in elk besturingssysteem waarmee iemand aangeeft minder beweging te willen zien. Die instelling kun je uitlezen.
Je hoort hem te respecteren en het effect dan uit te zetten. Dat kost een paar regels code en het is een van de eenvoudigste toegankelijkheidsmaatregelen die er zijn. Meer daarover lees je bij accessibility.
Vraag je bouwer of de bewegingsinstelling van het besturingssysteem wordt gerespecteerd. Dat kost een paar regels code.
Voor mensen die daar gevoelig voor zijn, is een pagina vol beweging simpelweg onbruikbaar. Dat is geen detail. Het is een van de eenvoudigste toegankelijkheidsmaatregelen die er zijn.
Is parallax nog van deze tijd?
Subtiel toegepast op een enkele plek werkt het prima. Als thema voor een hele site niet meer.
Een lichte dieptewerking in je openingsblok kan een pagina karakter geven. Dat valt op zonder dat het opdringt.
Wat niet werkt is een pagina vol met secties waar de achtergrond bij elke stap meebeweegt. Dan wordt scrollen zelf een prestatie in plaats van een handeling.
Kies dus voor een accent en niet voor een thema. Dat is de kortste samenvatting van dit hele onderwerp.
De vraag die ik altijd stel is: wat wordt je bezoeker hier wijzer van? Is het antwoord alleen esthetisch, dan weegt het zelden op tegen de kosten in laadtijd en toegankelijkheid.
Kies voor een accent en niet voor een thema. Een lichte dieptewerking op een plek kan karakter geven.
Een hele pagina met bewegende achtergronden maakt scrollen tot een prestatie in plaats van een handeling. Zo houd je het bijzondere bijzonder in plaats van dat het gaat vermoeien.
Staat er een scrolleffect op je site en twijfel je of het nog helpt? Stuur me de link via het formulier hieronder. Ik kijk wat het je kost aan laadtijd, hoe het zich houdt op een telefoon en of de bewegingsinstelling wordt gerespecteerd. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Parallax scrolling, dieptescroll, scrolleffect
