5 Handige Parallax scrolling links

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

parallax1

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.

– Link

2. Parallax Scrolling tutorial

parallax2

Éé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.

– Link

3. Hoe creeer je een Parallax scrolling website?

parallax3

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!

– Link

4. Parallax scrolling met effecten

parallax4

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?

– Link

5. Meer voorbeelden van Parallax design

parallax5

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.

– Link

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!

Belsimpel.nl - de sympathieke webshop uit Groningen!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *