• HTML5 parallax

    Lang geleden bracht Psygnosis het spel Shadow of the Beast uit voor de Amiga. Dit was een spel dat bekend zou gaan staan om de vele lagen parallax in de achtergrond, die een gevoel van diepte aan het scherm meegaven. Dit effect werd verkregen door meerdere lagen visuals achter elkaar te plaatsen, en de achterste lagen minder snel te bewegen dan de voorste, wanneer het scherm schuift, of scrollt. Vele games die volgden maakten gebruik van meerdere lagen parallax, een van de bekendste op Amiga is het spel Lionheart.

    Skrollr
    Fast-forward naar 2012, plotseling zie je overal websites verschijnen die ook gebruik maken van parallax-effecten. Het ziet er erg fraai uit, vooral ook omdat je als bezoeker zelf in control bent, hoe sneller je scrollt, hoe sterker het effect. Er zijn heel veel applicaties mogelijk en ik beloof bij deze plechtig dat ik een paar unieke effecten zal schrijven die gebruik maken van parallax. Voor nu heb ik vooral gekeken naar Skrollr, een Javascript library die het erg eenvoudig maakt om parallax-effecten te creeeren. Onderstaande demo laat zien hoe het werkt, elk html-element heeft een toegevoegd data-attribuut waarin beschreven wordt wat er dient te gebeuren bij welke positie. Skrollr leest dit uit en zorgt dat het gebeurt. Het is erg eenvoudig en zelfs met alleen trial and error kom je hier een heel eind. Binnenkort meer!

‹ HOME Meer experimenten