14 fantastiske parallaksrullende nettsteder

Parallaksrulling har eksistert en stund, men det er en av de trendene for nettdesign som bare fortsetter. Parallaks rulling er når nettstedsoppsettet ser bakgrunnen til websiden bevege seg med en lavere hastighet til forgrunnen, og skaper en 3D-effekt når du blar. Brukt sparsomt kan det gi et fint, subtilt element av dybde som resulterer i et særegent og minneverdig nettsted.

For å vise hvordan det skal gjøres, er det noen nettsteder som benytter seg av teknikken til strålende effekt. I noen tilfeller er parallaksrullingen stjernen i showet; i andre legger det ganske enkelt til et snev av dybde som gjør at forgrunnen ser ut til å dukke litt ut.

Hvis du virkelig vil skyve båten ut, viser disse imponerende CSS-animasjonseksemplene en annen flott måte å få nettstedet til å stå ut fra mengden. Og du kan også sjekke ut de beste nettdesignverktøyene våre som vil hjelpe deg med designdesignet ditt. For nå, la oss ta en titt på noen nettsteder som bruker parallaksrulling på veldig mye riktig måte.

Nettdesign kunsthistorie

Kunsthistorie og nettdesign er ikke emner du nødvendigvis vil sette sammen, men de er vakkert forenet i dette webdesign-kunsthistoriske nettstedet, som sporer fremtiden for webdesign ved å se på kunst gjennom tidene.

Her er det en rekke parallaks-rulleteknikker, som betyr at brukerne hele tiden blir overrasket og glade når de ruller nedover på siden. Denne er vel verdt å bruke litt tid på å utforske.

Qode Interactive Catalog

Qode Interactive Catalog har et stilisert bunntekstnavigasjonssystem for å avsløre et bilde for hvert element. Ved å klikke på katalogen ser du horisontal parallaksrulling som brukes til å vise frem en rekke WordPress-temaer. Det er ikke den mest banebrytende bruken av parallaksrulling i denne listen, men den tjener formålet sitt godt. Et sprut av animasjon blir også brukt med god effekt.

Kanaler

Designet av Marcus Brown og utviklet av Aristide Benoist, tar Canals deg med på en 400 år lang reise gjennom Amsterdam-kanalene fra 1600-tallet. Nettstedet er designet for å gi en redaksjonell stilopplevelse , som å bla gjennom et frodig salongbordsvolum, og det bruker stor parallaks for å trekke oppmerksomheten mot nye deler av historien, og for å gi nettstedet en subtil dybdeeffekt.

Historien om The Goonies

Alle i en viss alder er garantert kjærlighet «80s te no adventure flick, The Goonies, og hvis det er deg, vil dette nettstedet sikkert få nostalgi-kjertlene bankende. The Story of The Goonies er laget av Joseph Berry ved hjelp av WebFlow, og er en hyllest til en retroklassiker som bruker parallaksrulling for å trekke deg inn i historien, introdusere deg for karakterene og avsløre modus om filmen.

Dogstudio

Den umiddelbare fokusattraksjonen til Dogstudios nettsted er en vakker animert 3D-hund – eller er det en ulv? – midt på siden, som skalerer og roterer mens du ruller deg nedover parallaksiden. Dens belysning skifter farge når du holder markøren over titlene på Dogstudios nylige prosjekter, og kanskje vår favorittbit er når den dreier seg foran en del av sidekopien, og tilslører noe av teksten.

ToyFight

ToyFight er et prisbelønt kreativt byrå, og nettstedet er veldig gøy. Grunnleggerne Jonny Lander og Leigh Whipday har forvandlet seg til 3D-figurer, som vises i en rekke scener over hele siden (inkludert denne frekke Sagmeister & Walsh-referansen). Smart bruk av parallaks forsterker 3D-effekten, og sammen med dristige, lyse, enkle bakgrunner blir aldri overveldende eller irriterende.

Diesel: BAD Guide

84.Paris opprettet denne imponerende parallaksnettstedet (og tilhørende kampanjer for sosiale medier) som følge av lanseringen av Diesel «BAD-duft. Den ene siden viser en rekke regler som utgjør» BAD Guide «.

Brukeren kan utforske ved å dra musen rundt parallax-siden, som er lagt ut som et tavle med bilder å klikke gjennom. Det er råd om alt fra Tinder («Sveip til høyre, høyre, høyre, høyre – du vil sortere dem ut senere «) til Instagram (» Ikke glem å komme i kontakt med en eks på torsdager #TBT «), ledsaget av monokrome illustrasjoner.

Firewatch

En av de vakreste eksemplene på parallaksrulling vi har sett, er dette nettstedet for spillet Firewatch, som bruker seks bevegelige lag for å skape en følelse av dybde. Det er flott fordi det ikke er noen rullekapring (noe som ofte følger med parallakseffekten), og den brukes bare øverst på siden – resten av siden er fortsatt slik at du kan lese informasjonen uten å bli sjøsyk. Hvis du vil se hvordan det gjøres, er det en fin demo på CodePen.

GitHub 404

GitHub «s 404-side er ikke strengt parallaksrulling da effekten skjer på musevrikling i motsetning til å bla, men det er en veldig morsom side som bruker lagdeling for å legge til dybde. I motsetning til «ordentlig» parallaks beveger bakgrunnen seg raskere enn forgrunnen, og skaper en desorienterende, utenomjordisk følelse.

Jess & Russ

Det er ingen overraskelse at designmaktparet Russ Maschmeyer og Jessica Hisches bryllupsnettsted er en skjønnhet å se. Nettstedet kartlegger sin romantiske historie, med parallaksrulling som brukes til å gi dybden til illustrasjonene. De giftet seg i 2012, men nettstedet er fortsatt vel verdt å se.

Make Your Money Matter

Finans og penger er neppe det mest interessante av fagene. Men det New York-baserte digitale byrået Firstborn er veldig interessert i dette dynamiske parallaksrullingsnettstedet Make Your Money Matter for the Public Service Credit Union.

Med sikte på å lære publikum fordelene ved å bli med i en kredittforening, i stedet for å bruke en bank, inneholder dette strålende nettstedet alt fra hvordan en kredittforening fungerer, til hvor du kan finne en og hvordan du søker, samt en kalkulator som viser hvor mye bankene tjener på kundens innskudd.

Madwell

Design- og utviklingsbyrå Madwell, basert i New York, viser frem sin portefølje med en rekke parallaks-rulleeffekter for å skape en merkbar 3D-stil som gir en enorm mengde dybde.

New York Times: Tomato Can Blues

I dagens tid med lavt oppmerksomhetsomfang og mellomstore medier, hvordan tiltrekker du folk til langvarig journalistikk? Tomato Can Blues er et godt svar på det problemet fra New York Times, og kombinerer noen smarte webdesignteknikker med historiefortelling og tegneserieinspirerte illustrasjoner laget av Atilla Futaki.

Et av de beste eksemplene på parallaksrulling vi «har sett, tar artikkelen deg gjennom historien om en burjager skrevet av Mary Pilon. Når du blar gjennom innholdet, blir illustrasjonene levende med smarte animasjoner og endringer, slik at du kan fordype deg helt i innholdet.

Futakis illustrasjoner var basert på politiets poster, vitnekontoer, fotografier og reporterens notater, og oppmerksomheten på detaljer skinner gjennom. Alt i alt er det en god leseopplevelse – er dette fremtiden for onlinejournalistikk ?

Snøfall

Et av de første nettstedene som virkelig skyve grensene for hva du kan gjøre med redaksjonelt innhold på nettet, New York Times «Snow Fall-artikkelen kombinerer en rekke forskjellige elementer, inkludert parallaksrulling og webvideo.

Artikkelen, om skrekken ved et skred ved Tunnel Creek, ble publisert online i desember 2012, men står fremdeles sterkt som et eksempel på hva du kan gjøre med parallaksrulling. Avisen presenterte den Pulitzer-vinnende artikkelen på en innovativ måte som fanget designfellesskapets oppmerksomhet over hele verden.

• 19 veldig nyttige responsive veiledninger i webdesign
• beste eksterne harddisker
• Strålende 404 feilsider