14 fantastiska parallaxrullningswebbplatser

Parallaxrullning har funnits ett tag men det är en av de webbdesigntrenderna som bara fortsätter. Parallaxrullning är när webbplatsens layout ser bakgrunden på webbsidan röra sig långsammare till förgrunden, vilket skapar en 3D-effekt när du rullar. Används sparsamt kan det ge ett trevligt, subtilt djupelement som resulterar i en distinkt och minnesvärd webbplats.

För att visa hur det ska göras, här är några webbplatser som använder tekniken till strålande effekt. I vissa fall är parallaxrullningen stjärnan i showen; i andra lägger det helt enkelt till en touch av djup som gör att förgrunden verkar springa ut lite.

Om du verkligen vill skjuta ut båten, visar dessa imponerande CSS-animeringsexempel ett annat bra sätt att få din webbplats att stå ut ur mängden. Och du kan också kolla in våra bästa webbdesignverktyg som kommer att hjälpa dig i din design. För tillfället kan vi ta en titt på vissa webbplatser som använder parallax-rullning på mycket rätt sätt.

Webbdesign konsthistoria

Historien om konst och webbdesign är inte ämnen som du nödvändigtvis skulle sätta ihop, men de är vackert förenad i denna webbdesign konsthistoriska webbplats, som spårar framtiden för webbdesign genom att titta på konst genom tiden.

Det finns en rad parallax-rullningstekniker här, vilket innebär att användarna ständigt blir förvånade och glada när de rullar ner på sidan. Den här är väl värt att spendera lite tid på att utforska.

Qode Interactive Catalog

Qode Interactive Catalog har ett stiliserat bottentextnavigeringssystem för att avslöja en bild för varje objekt. Genom att klicka på katalogen ser du horisontell parallaxrullning som används för att visa upp en rad WordPress-teman. Det är inte den mest banbrytande användningen av parallaxrullning i den här listan, men den tjänar sitt syfte väl. Ett stänk av animering används också med god effekt.

Kanaler

Designad av Marcus Brown och utvecklad av Aristide Benoist, tar Canals dig på en 400-årig resa genom Amsterdams 1700-talskanaler. Webbplatsen är utformad för att ge en redaktionell stilupplevelse , som att bläddra igenom en frodig soffbordsvolym, och den använder stor parallax för att uppmärksamma nya delar av sin berättelse och för att ge sajten en subtil djupeffekt.

Historien om The Goonies

Vem som helst i en viss ålder garanteras kärlek ”80-talet te en äventyrsfilm, The Goonies, och om det är du så kommer den här webbplatsen säkert att få dina nostalgi körtlar. Skapad av Joseph Berry med hjälp av WebFlow, The Story of The Goonies är en hyllning till en retroklassiker som använder parallax-rullning för att dra dig in i berättelsen, presentera dig för karaktärerna och avslöja läge om filmen.

Dogstudio

Den omedelbara attraktionen för Dogstudios webbplats är en vacker animerad 3D-hund – eller är det en varg? – mitt på sidan, som skalar och roterar när du rullar din väg ner parallax-sidan. Dess belysning ändrar färg när du svävar över titlarna på Dogstudios senaste projekt, och kanske är vår favoritbit när den kretsar framför en del av sidkopian och döljer en del av texten.

ToyFight

ToyFight är en prisbelönt kreativ byrå, och dess webbplats är mycket roligt. Grundarna Jonny Lander och Leigh Whipday har förvandlat sig till 3D-figurer, som förekommer i en rad olika scener över hela webbplatsen (inklusive denna fräcka Sagmeister & Walsh-referens). Smart användning av parallax förstärker 3D-effekten och paras med djärva, ljusa, vanliga bakgrunder blir aldrig överväldigande eller irriterande.

Diesel: BAD Guide

84.Paris skapade denna imponerande parallaxwebbplats (och tillhörande kampanjer för sociala medier) för att följa med lanseringen av Diesel ”BAD-doft. På en sida visas en serie regler som utgör” BAD Guide ”.

Användaren kan utforska genom att dra musen runt parallax-sidan, som är utformad som en anslagstavla med bilder för att klicka igenom. Det finns råd om allt från Tinder (”Svep åt höger, höger, höger, höger – du sorterar dem ut senare ”) till Instagram (” Glöm inte att komma i kontakt med ett ex på torsdagar #TBT ”), tillsammans med monokroma illustrationer.

Firewatch

En av vackraste exemplen på parallaxrullning vi har sett är den här webbplatsen för spelet Firewatch, som använder sex rörliga lager för att skapa en djupkänsla. Det är fantastiskt eftersom det inte finns någon rullkapning (något som ofta följer med parallaxeffekten), och den används bara högst upp på sidan – resten av webbplatsen är fortfarande så att du kan läsa informationen utan att bli sjösjuk. Om du vill se hur det görs, här är en trevlig demo på CodePen.

GitHub 404

GitHub ”s 404-sida är inte strikt parallaxrullning eftersom effekten händer vid musvridning i motsats till bläddring, men det är en riktigt rolig sida som använder lager för att ge djup. Till skillnad från ”rätt” parallax rör sig bakgrunden snabbare än förgrunden, vilket skapar en desorienterande, utländsk känsla.

Jess & Russ

Det är ingen överraskning att designmaktparet Russ Maschmeyer och Jessica Hisches bröllopswebbplats är en skönhet att se. Webbplatsen kartlägger deras romantiska historia, med parallaxrullning som används hela tiden för att ge djupet till illustrationerna. De gifte sig 2012, men webbplatsen är fortfarande väl värt en titt.

Make Your Money Matter

Ekonomi och pengar är knappast det mest intressanta av ämnena. Men den New York-baserade digitala byrån Firstborn är mycket nöjd med denna dynamiska parallax-rullningswebbplats Make Your Money Matter for the Public Service Credit Union.

Med målet att lära allmänheten fördelarna med att gå med i en kreditförening, snarare än att använda en bank, innehåller den här lysande webbplatsen allt från hur en kreditförening fungerar, till var man kan hitta en och hur man ansöker, samt en miniräknare som visar hur mycket bankerna tjänar på kundernas insättningar.

Madwell

Design- och utvecklingsbyrå Madwell, baserat i New York, visar upp sin portfölj med en rad parallax-rullningseffekter för att skapa en märkbar 3D-stil som ger en enorm djup.

New York Times: Tomato Blues

I dagens tid med låg uppmärksamhet och medelstora medier, hur lockar du människor till långformad journalistik? Tomato Blues är ett bra svar på det problemet från New York Times, som kombinerar några smarta webbdesignstekniker med berättande och komiskinspirerade illustrationer skapade av Atilla Futaki.

Ett av de bästa exemplen på parallaxrullning vi ”har sett, artikeln tar dig igenom berättelsen om en burkämpe skriven av Mary Pilon. När du bläddrar igenom innehållet blir illustrationerna levande med smarta animationer och förändringar, så att du helt kan fördjupa dig i innehållet.

Futakis illustrationer baserades på polisregister, vittnesbok, fotografier och reporternas anteckningar och uppmärksamheten på detaljer lyser igenom. Allt som allt är det en bra läsupplevelse – är detta framtiden för onlinejournalistik ?

Snow Fall

En av de första platserna som verkligen skjuta gränserna för vad du kan göra med långformigt redaktionellt innehåll online, New York Times ”Snow Fall-artikel kombinerar en rad olika element, inklusive parallaxrullning och webbvideo.

Artikeln, om skräck av en lavin vid Tunnel Creek, publicerades online i december 2012 men står fortfarande stark som ett exempel på vad du kan göra med parallaxrullning. Tidningen presenterade den Pulitzer-vinnande artikeln på ett innovativt sätt som fångade designgemenskapens uppmärksamhet över hela världen.

• 19 riktigt bra responsiv webbdesignhandledning
• bästa externa hårddiskar
• Strålande 404-felsidor