Parallax scrolling is de nieuwste techniek in de nimmer stilstaande vernieuwing van het web. De oorsprong ligt bij Disney tekenfilms. Deze gebruikten als eerste de techniek dat de achtergrond langzamer bewoog dan het beeld op de voorgrond. Dit veroorzaakt een 3D effect. Een aantal links naar tutorials en voorbeelden vind je hieronder.
1. Parallax Scrolling Demonstratie
Deze pagina geeft de meest eenvoudige demo weer. Eigenlijk is dit meer iets om aan klanten te laten zien wat de absolute basis van Parallax eigenlijk is. Focus op een paragraaf en scroll dan heen en weer. Leuk maar niet indrukwekkend.
2. Parallax Scrolling tutorial
Één van de eerste bekende websites met het Parallax effect was een product landingspagina van Nike. In deze link wordt uitgelegd (met andere beelden). hoe het ene beeld via jQuery over het andere beeld heen kan scrollen. De menu puntjes aan de zijkant zie je veel op single page websites. Deze single page website gebruiken vaak een parallax scrolling methode.
3. Hoe creeer je een Parallax scrolling website?
Dit is misschien wel de mooiste tutorial om een single page website te maken. Dit is wel voor de ietwat gevorderde web ontwikkelaar. Je hebt voor deze tutorial HTML5, CSS3 en jQuery kennis nodig. Maar als je het eenmaal doorhebt gaat er een wereld voor je open!
4. Parallax scrolling met effecten
Heb je liever flitsende binnenkomsten en scroll mogelijkheden? Bekijk dan deze tutorial. Het is gebaseerd op de Skrollr Javascript library. Wie heeft er tegenwoordig nog Flash nodig, niemand toch?
5. Meer voorbeelden van Parallax design
Heb je er nog niet genoeg van of wil je juist inspiratie opdoen, dan is deze verzamelpagina iets voor jou. Houd er rekening mee dat dit een ietwat verouderde pagina is (uit 2011), dus dat de gebruikte scripts ook niet helemaal up-to-date zijn.
Zo.
Dat waren ze. We zijn momenteel bezig met een aantal mooie parallax websites. Zodra deze af zijn zal ik ze hier plaatsen. Mocht je zelf nog handige of mooie Parallax websites tegenkomen, plaats ze in de comments hieronder!