14 verbluffende websites met parallax-scrollen

Parallax-scrollen bestaat al een tijdje, maar het is een van die webdesigntrends die maar doorgaat. Parallax-scrollen is wanneer de website-indeling de achtergrond van de webpagina langzamer naar de voorgrond ziet bewegen, waardoor een 3D-effect ontstaat terwijl u scrolt. Als het spaarzaam wordt gebruikt, kan het een mooi, subtiel element van diepte bieden dat resulteert in een onderscheidende en gedenkwaardige website.

Om te laten zien hoe het moet worden gedaan, volgen hier enkele sites die de techniek op briljante wijze gebruiken. In sommige gevallen is het parallax scrollen de ster van de show; in andere voegt het gewoon een vleugje diepte toe waardoor de voorgrond een beetje naar voren lijkt te komen.

Als je de boot echt naar buiten wilt duwen, laten deze indrukwekkende CSS-animatievoorbeelden een andere geweldige manier zien om je website te laten staan uit de menigte. En u kunt ook onze beste webontwerptools bekijken die “u zullen helpen bij uw ontwerpinspanningen. Laten we voorlopig eens kijken naar enkele sites die parallax-scrollen op de juiste manier gebruiken.

Kunstgeschiedenis van webdesign

De geschiedenis van kunst en webdesign zijn geen onderwerpen die je per se samen zou stellen, maar ze zijn prachtig verenigd in deze kunsthistorische site voor webdesign, die de toekomst van webdesign volgt door naar kunst door de tijd te kijken.

Er zijn hier een reeks parallax-scroltechnieken in het spel, wat betekent dat gebruikers constant verrast en opgetogen zijn terwijl ze naar beneden scrollen op de pagina. Deze is de moeite waard om wat tijd te besteden aan het verkennen.

De Qode Interactive Catalog

De Qode Interactive Catalog heeft een gestileerd tekstnavigatiesysteem onderaan om te onthullen een afbeelding voor elk item. Als je op de catalogus klikt, wordt horizontaal parallax-scrollen weergegeven om een reeks WordPress-themas te laten zien. Het is niet het meest baanbrekende gebruik van parallax-scrollen in deze lijst, maar het dient zijn doel goed. Een spetterende animatie wordt ook met goed resultaat gebruikt.

Canals

Ontworpen door Marcus Brown en ontwikkeld door Aristide Benoist, neemt Canals je mee op een 400-jarige reis door de geschiedenis van de 17e eeuwse Amsterdamse grachten. De site is ontworpen om een ervaring in redactionele stijl te bieden , zoals bladeren door een weelderig koffietafelvolume, en het maakt veel gebruik van parallax om uw aandacht te vestigen op nieuwe delen van het verhaal en om de site een subtiel diepte-effect te geven.

Het verhaal van The Goonies

Iedereen van een bepaalde leeftijd is gegarandeerd van liefde “80s te en adventure flick, The Goonies, en als jij dat bent, dan zal deze site zeker je nostalgische klieren doen kloppen. The Story of The Goonies, gemaakt door Joseph Berry met behulp van WebFlow, is een eerbetoon aan een retroklassieker die parallax-scrollen gebruikt om je het verhaal in te trekken, je kennis te laten maken met de personages en de modus over de film te onthullen.

Dogstudio

De onmiddellijke focus van de Dogstudio “-site is een prachtige geanimeerde 3D-hond – of is het een wolf? – in het midden van de pagina, die schaalt en draait terwijl je scrolt je weg naar beneden op de parallax-pagina. De verlichting verandert van kleur als je de muisaanwijzer over de titels van Dogstudios recente projecten beweegt, en misschien is ons favoriete onderdeel wanneer het voor een deel van de paginakopie draait, waardoor een deel van de tekst wordt verduisterd.

ToyFight

ToyFight is een bekroond creatief bureau, en de website is erg leuk. Oprichters Jonny Lander en Leigh Whipday hebben zichzelf in 3D-figuren veranderd, die in een reeks scènes op de hele site verschijnen (inclusief deze brutale Sagmeister & Walsh-referentie). Slim gebruik van parallax versterkt het 3D-effect, en in combinatie met gedurfde, heldere, effen achtergronden wordt het nooit overweldigend of irritant.

Diesel: BAD Guide

84.Paris creëerde deze indrukwekkende parallax-website (en de bijbehorende sociale mediacampagne) ter begeleiding van de lancering van Diesels BAD-geur. De site van één pagina presenteert de reeks regels waaruit de “BAD Guide” bestaat.

De gebruiker kan verkennen door de muis over de parallax-pagina te slepen, die is ingedeeld als een prikbord met afbeeldingen om doorheen te klikken. Er is advies over alles van Tinder (Veeg naar rechts, rechts, rechts, rechts – je sorteert ze out later “) op Instagram (” Vergeet niet op donderdag in contact te komen met een ex #TBT “), vergezeld van monochrome illustraties.

Firewatch

Een van de De mooiste voorbeelden van parallax-scrollen die we hebben gezien, is deze website voor het spel Firewatch, dat zes bewegende lagen gebruikt om een gevoel van diepte te creëren. Het is geweldig omdat er geen scroll-kaping plaatsvindt (iets dat vaak gepaard gaat met het parallax-effect), en het wordt alleen bovenaan de pagina gebruikt – de rest van de site is nog steeds zodat je de informatie kunt lezen zonder zeeziek te worden. Als je wilt zien hoe het werkt, hier is een mooie demo op CodePen.

GitHub 404

De 404-pagina van GitHub is niet strikt parallax-scrollen, aangezien het effect optreedt bij muisbeweging in plaats van scrollen, maar het is echt een leuke pagina die laagjes gebruikt om diepte toe te voegen. In tegenstelling tot “echte” parallax, beweegt de achtergrond sneller dan de voorgrond, waardoor een desoriënterend, buitenaards gevoel ontstaat.

Jess & Russ

Het is geen verrassing dat de bruiloftswebsite van designpaar Russ Maschmeyer en Jessica Hische een schoonheid is om te zien. De site brengt hun romantische verhaal in kaart, waarbij parallax-scrollen overal wordt gebruikt om diepte aan de illustraties toe te voegen. Ze zijn in 2012 getrouwd, maar de website is nog steeds de moeite van het bekijken waard.

Make Your Money Matter

Financiën en geld zijn niet echt de meest interessante onderwerpen. Maar het in New York gevestigde digitale bureau Firstborn doet mee met deze dynamische parallax-scrolling-website Make Your Money Matter for the Public Service Credit Union.

Met als doel het publiek de voordelen bij te brengen van deelname aan een kredietvereniging, in plaats van een bank te gebruiken, bevat deze briljante site alles, van hoe een kredietvereniging werkt, tot waar u er een kunt vinden en hoe u een aanvraag kunt indienen, evenals een rekenmachine die laat zien hoeveel banken profiteren van de depositos van klanten.

Madwell

Ontwerp- en ontwikkelingsbureau Madwell, gevestigd in New York, pronkt met zijn portfolio met een reeks parallax-scrolleffecten om een opvallende 3D-stijl te creëren die een enorme hoeveelheid diepte.

New York Times: Tomato Can Blues

Hoe trek je mensen aan om in het huidige tijdperk van lage aandachtsspanne en hapklare media mensen aan te trekken voor langdurige journalistiek? Tomato Can Blues is een geweldig antwoord op dat probleem van de New York Times, door een aantal slimme webontwerptechnieken te combineren met het vertellen van verhalen en komische illustraties gemaakt door Atilla Futaki.

Een van de beste voorbeelden van parallax-scrollen zijn we “heb gezien, het artikel neemt je mee door het verhaal van een kooivechter geschreven door Mary Pilon. Terwijl je door de inhoud scrolt, komen de illustraties tot leven met slimme animaties en aanpassingen, zodat je jezelf volledig kunt onderdompelen in de inhoud.

Futakis illustraties waren gebaseerd op politiedossiers, getuigenverklaringen, fotos en aantekeningen van de verslaggever, en de aandacht voor detail komt duidelijk naar voren. Al met al is het een geweldige leeservaring – is dit de toekomst van online journalistiek ?

Sneeuwval

Een van de eerste sites die verleg je echt de grenzen van wat je zou kunnen doen met online longform redactionele inhoud, het artikel in de New York Times “Snow Fall combineert een reeks verschillende elementen, waaronder parallax-scrollen en webvideo.

Het artikel, over de gruwel van een lawine bij Tunnel Creek, werd in december 2012 online gepubliceerd, maar is nog steeds een sterk voorbeeld van wat je kunt doen met parallax-scrollen. De krant presenteerde het Pulitzer-winnende artikel op een innovatieve manier die de aandacht van de designgemeenschap wereldwijd trok.

• 19 echt nuttig responsive tutorials voor webontwerp
• beste externe harde schijven
• Briljant ontworpen 404-foutpaginas