Creëer diepte op je website met parallax scrolling

Als je in de auto zit en naar buiten kijkt, dan zie je dat de lantaarnpalen naast de weg veel sneller voorbij lijken te komen dan het landschap in de verte. Dit is het parallax-verschijnsel.

Met parallax scrolling kun je de illusie van diepte creëren op beeldschermen. Dit werd voor het eerst gedaan in het spelletje Moon Patrol uit 1982:

(© Rich Jones) De bergen op de voorgrond bewegen sneller dan die op de achtergrond.

Het effect wordt steeds vaker gebruikt op websites. De achtergrond beweegt dan bij het scrollen langzamer omhoog en omlaag dan de voorgrond. Kijk bijvoorbeeld eens op de site van cultural solutions uk. De bollen op de achtergrond bewegen minder snel dan de tekst op de voorgrond. Ze hebben het parallax-verschijnsel ook op een andere manier toegepast: als je met je muis over het logo beweegt volgen de bollen je bewegingen.

Met de illusie van diepte kan een website interessanter worden om te bekijken. Zo lijkt het op de site van expeditie Row to the Pole net alsof je boven ijsschotsen vliegt doordat de wolkjes sneller bewegen dan de ijsplaten daaronder. Dit brengt het onderwerp van de site goed over. Ook is het wat levendiger: je voelt bijna de poolwind waaien terwijl je scrollt.

Parallax scrolling is leuk om te zien en kan een verhaal ondersteunen. Maar als er een grote hoeveelheid afbeeldingen op verschillende manieren in beweging gezet is kan dat de website vertragen. Ook is het nogal afleidend als alles nadrukkelijk beweegt.

Als het niet te opvallend aanwezig is en de snelheid of gebruiksgemak niet tegenwerkt dan is het zeker een leuke toevoeging aan een site.

Wil je zelf aan de slag met diepte op je website? Deze links helpen je vooruit: