10 supergoede parallax scrolling websites

Categorie(ën):

Parallax scrolling, kent u het al?

Een hele mooie techniek met jQuery om de website interactief te maken. Om diepte in de website te creëren maar ook om losse elementen apart van elkaar te laten bewegen. Het wordt nog niet heel veel gebruikt, maar voor sommige opdrachten zijn ontzettend gave producten neergezet die gebruik maken van zeer complexe Parallax Scrolling. In deze websites zitten uren werk en zijn dan ook fascinerend om naar te kijken, zeker als ‘minder ervaren’ jQuery gebruiker.

 

10 websites die draaien om parallax scrolling

Dankzij http://www.creativebloq.com/ is er een verzameling van 50 websites die allemaal gebaseerd en gebouwd zijn met en om het parallax scrolling. We hebben hiervan een lijst van 10 websites gemaakt die er voor Energize Designs écht uit sprongen.
Geniet van de lijst en laat je verbijsteren door de kunstige opmaak van deze geweldige websites.

 

1. Make your money matter : Join a credit union

Zoals de titel zegt: zorgt dat je geld telt. Niet als in de rekenkundige vorm, maar dat het er echt toe doet. Op deze website wordt op een interactieve en duidelijk wijze uitgelegd wat er met je geld kan gebeuren als je dit stort bij de reguliere grote banken. Zodra jij je geld in de geldautomaat stopt, kan het vanaf daar alle kanten op gaan. Ook in risicovolle investeringen. En als er winst is, blijft dat bij de aandeelhouders (terwijl dat met jouw geld is verdient). Als er geen winst maar juist een schuld is, krijg je dat dan weer wel mee.
Deze organisatie strijd voor een betere besteding van de deposit die mensen doen. Gezamenlijk verantwoordelijk voor het geld dat is gestort: genieten van de winst en delen in verlies.

 

2. Every Last Drop : Saving Water

Dagelijks wordt er per dag per persoon (in The United Kingdom) zo’n 150 liter water verbruikt. Maar zoals de intro op de website al zegt: “Dit is slecht een deel van het geheel”. Als je gaat kijken naar hoeveel water er nodig is voor alles wat we gebruiken elke dag, kom je er achter dat ze 4645 liter er door heen jagen!
Ook deze website laat op een interactieve, overzichtelijke en leerzame manier zien hoe en wat de situatie voor desbetreffende onderwerp is. Het zelf gelezen te hebben… eigenlijk wel idioot veel water!

 

3. Seattle’s Space Needle

De Space Needle in Seattle Amerika: ik ben er helaas nog nooit geweest. Maar deze site laat precies zien welke elementen de Space Needle bevat en wat er zo interessant / leuk aan is. Speciale van deze parallax scrolling website is dat het even anders gaat dan anders. Helaas is dit niet goed echt aangegeven want ik zat als een gek naar beneden te scrollen… totdat ik er achter kwam dat je ‘beneden’ begon in de Space Needle en naar ‘boven ging’ door omhoog te scrollen. Aan de andere kant is dat dan wel weer heel logisch.
Deze website heeft ook een aantal leuke ‘3D’ effecten zoals de lift die de toren omhoog klimt en het vliegtuigje wat later voorbij komt.

 

4. Rimmel London US : Mascara

Nee, deze site heb ik niet zelf gevonden, want ik gebruik geen mascara. Ook deze website is slim in elkaar gezet en gebruikt, zoals voor mij bekend was, parallax scrolling zoals het bedacht was. De achtergrond die langzamer naar beneden scrollt als de content en losse elementen die van boven en onder komen. Waarbij gebruik ik gemaakt van een blurry effect waardoor er letterlijk diepte wordt gecreëerd. Het draait hier dan ook om de mascara en die is netjes, duidelijke en scherp, in het midden gezet met informatie ernaast.

 

5. Gameboy 25th Birthday : The ultimate Game Boy Tetris experience for scrolling enthusiasts

Geen informatieve website, maar een eerbetoon aan Gameboy’s 25e verjaardag (2014). Gemaakt door Petr Tichy, een front-end developer van ihatetomatoes.net. Hij is de auteur van het boek ‘Parallax Scrolling Master Class’ en daarmee leert hij andere hoe parallax scrolling werkt. In dit eerbetoon, scroll je door een potje tetris en uiteindelijk kom je uit op de vraag of je ook een ‘Parallax Scrolling Champion’ wilt worden. Een staaltje coderen waarmee hij laat zien wat mogelijk is en uiteraard een leuke PR-stunt voor zijn eigen website.

 

6. Flat vs Realism : Next level parallax scrolling

Dit is voor mij tot nu toe de mooiste parallax scrolling website die ik gezien heb. Ontzettend goed in elkaar gezet: het thema is duidelijk, effecten zoals ‘uitzoomen’ wordt versterkt door de motion blur in de verschillende frames en aan het einde een knaller van een afsluiter d.m.v. een mini game. Dit is natuurlijk gebaseerd op hoe het design van tegenwoordig is: flat. Alles is plat en zo statisch mogelijk. Icoontjes, logo’s en noem maar op. Deze PR-website gaat om de boodschap dat ‘Intacto’ geen voorkeur heeft voor Flat of Realistic design, want ze vinden allebei mooi, zolang het maar een goed verhaal verteld! En dat doet deze website zeker!

 

7. Madwell : Madwell makes ideas. Ideas makes things

Niet veel nodig om uit te leggen. Dit ontwerp bureau doet aan Creative Marketing Strategy, Branding, Mobile, Web en meer. En uiteraard presenteren ze dit op een manier die indruk maakt. Mooie website.

 

8. Peugeot HYbrid4 Graphic Novel

Een graphic novel om je product te presenteren. En dan ook nog met een auto-play parallax scrolling website. Beter kan het eigenlijk niet. Door dit heldhaftige verhaal te volgen leer je welke functies er op de Peugeot HYBrid4 zitten en wat voor welke situatie het beste geschikt is. De autoplay functie hiervan is wel heel fijn, omdat je van dat scrollen soms een lamme vinger kunt krijgen.
Ander pluspunt (net zoals nr 6 Flat vs Realism) is de toevoeging van geluid: synchroon met het beeld. Maakt het toch even wat spannender!

 

9. Soleil Noir 2012

Less is more. Deze simpele maar elegante website was als nieuwjaar ‘kaart’ ontworpen door de franse studio Soleil noir (zwarte zon). Naast de eenvoudige maar elegante parallax scrolling, werd er ook gebruik gemaakt van een simpele combinatie van kleuren en cirkels als navigatie. En best nog wel leuke ‘punchlines’. Andro what?

 

10. The Walking Dead “Zombiefied”

Als promo voor de tv-serie The Walking Dead werd deze website ontwikkeld. En ook hierbij is, net als bij Peugeot (nr8), de website als graphic novel opgebouwd. Daarnaast zit er, vind ik, vette muziek onder. Maakt het nog een beetje spannender. En voor iedereen die The Walking Dead heeft gezien, het is een goeie serie. Hoewel ik vind dat de muziek meer opbouwt dan de serie zelf is dit een super goede promo.

 

En met The Walking Dead als 10e in de lijst (wat overigens een willekeurige volgorde was) hebben we onze 10 beste parallax scrolling websites op een rijtje. Natuurlijk komen er steeds nieuwe websites bij en in de originele lijst van Creative Bloq (hier te vinden) staan er 50, waarvan sommige websites ook al veranderd zijn in static design.
Parallax scrolling is eigenlijk op veel meer manieren te gebruiken dan zoals beschreven bij de Rimmel London site: een achtergrond die afzonderlijk scrollt en losse (blurry) elementen die in beeld komen. In combinatie met bijvoorbeeld een jQuery Fade-in element kun je je website simpel houden en interactief laten zijn. Hierover volgt meer!!
Heb je nog een website gevonden die voorzien is van top-coding parallax scrolling of heb je zelf een website gebouwd met deze jQuery techniek? Laat het dan achter in de comments en deel jouw mening over de lijst.