One page parallax

One page designs zijn veel gezien tegenwoordig. Ze zijn bijzonder handig wanneer je niet heel veel content aan te bieden hebt en je bezoeker niet al te veel wilt laten klikken. Ik vind het zelf ook goed werken voor mobiel gebruikt aangezien een bezoeker dan niet een nieuw verzoek aan de server hoeft te doen.

Er zijn zeer veel leuke voorbeelden te vinden op internet en dit is slechts een van de velen. Ik heb een combinatie gemaakt van een smooth scroll tutorial op CSS Tricks en een jQuery effect van Aenism. Doordat de site grotendeels fluid is werkt het op mobiel ook. De enige wijziging is dat bij kleinere schermen de afbeeldingen op een bepaald moment niet meer schalen, en dat is prima.

Omdat de originele pagina geen menu heeft heb ik er een sticky header aan toegevoegd. Eventueel kun je hier ook een mooi effect aan toevoegen. Hou er echter rekening mee dat het toevoegen van meer scriptjes (en dus meer ‘verzoekjes’ aan een server) de site voor mobiel weer trager maakt.

Het voorbeeld is te vinden op http://yvonne.glr-imd.nl/voorbeelden/smooth-parallax/ en de code kun je downloaden op http://yvonne.glr-imd.nl/voorbeelden/smooth-parallax.zip

Links

Originele parallax is te vinden op http://parallax-scroll.aenism.com/ .
De smooth scrolling vind je op https://css-tricks.com/snippets/jquery/smooth-scrolling/.