Scroll en beweeg!
27 September 2011, door Heino Boekhout
Er duiken steeds meer websites op waar elementen met een verschillende snelheid voorbij komen wanneer er in een bepaalde richting gescrolld wordt. Om dit effect te demonstreren hebben we een gedeelte van een level uit Super Mario World™ (Nintendo, 1992) nagemaakt met behulp van de jQuery Scroll Parallax plugin. Het beeld bestaat uit drie bewegende lagen: de voorgrond beweegt tijdens het scrollen op normale snelheid, de achtergrond juist langzamer en de kogel weer sneller, waardoor het zogenaamde parallax verschijnsel optreedt.
Bekijk hier de demo (en scroll naar rechts!)
De demo werkt in de laatste versies van Chrome, Safari en Firefox. Niet in Internet Explorer.
De techniek is vrij eenvoudig toepasbaar, maar er moet wel rekening gehouden worden dat deze pagina's vaak een stuk zwaarder zijn en op oude computers minder goed draaien.
Fraaie websites die gebruik maken van deze techniek zijn onder andere de websites van Nike Better World, Unfold, TEDxPortland, Authentic Jobs en Nizo App.
