14 fantastiske websteder med parallaksrulning

Parallaksrulning har eksisteret i et stykke tid, men det er en af de webdesigntendenser, der bare fortsætter. Parallaksrulning er, når webstedslayoutet ser baggrunden på websiden bevæge sig langsommere til forgrunden, hvilket skaber en 3D-effekt, når du ruller. Brugt sparsomt kan det give et dejligt, subtilt element af dybde, der resulterer i et markant og mindeværdigt websted.

For at vise, hvordan det skal gøres, er her nogle websteder, der anvender teknikken til strålende effekt. I nogle tilfælde er parallaksrulningen stjernen i showet; i andre tilføjer det simpelthen et strejf af dybde, der får forgrunden til at synes at springe lidt ud.

Hvis du virkelig vil skubbe båden ud, viser disse imponerende CSS-animationseksempler en anden god måde at få dit websted til at stå ud fra mængden. Og du kan også tjekke vores bedste webdesignværktøjer, der “hjælper dig med dine designbestræbelser. Lad os dog nu se på nogle websteder, der bruger parallax-rulning meget meget på den rigtige måde.

Webdesign kunsthistorie

Kunstens historie og webdesign er ikke emner, du nødvendigvis ville sammensætte, men de er smukt forenet i dette webdesign-kunsthistoriske site, der sporer webdesignets fremtid ved at se på kunst gennem tiden.

Der er en række parallax-rulleteknikker på spil her, hvilket betyder, at brugerne konstant bliver overrasket og glade når de ruller ned på siden. Denne er værd at bruge lidt tid på at udforske.

Qode Interactive Catalog

Qode Interactive Catalog har et stiliseret bundtekstnavigationssystem, der afslører et billede for hvert emne. Ved at klikke på kataloget ser du vandret parallaxrulning, der bruges til at fremvise en række WordPress-temaer. Det er ikke den mest banebrydende brug af parallaksrulning på denne liste, men det tjener sit formål godt. En sprøjtning af animation bruges også til at opnå god effekt.

Kanaler

Designet af Marcus Brown og udviklet af Aristide Benoist, tager Canals dig med på en 400-årig rejse gennem Amsterdam-kanalerne fra det 17. århundrede. Webstedet er designet til at give en redaktionel stiloplevelse , som at bladre gennem et frodigt sofabordvolumen, og det gør stor brug af parallax for at henlede opmærksomheden på nye sektioner af sin historie og for at give webstedet en subtil dybdeeffekt.

Historien om The Goonies

Enhver i en bestemt alder er garanteret kærlighed “80erne te da adventure flick, The Goonies, og hvis det er dig, så vil dette sted helt sikkert få dine nostalgi kirtler til at banke. The Story of The Goonies er oprettet af Joseph Berry ved hjælp af WebFlow og er en hyldest til en retroklassiker, der bruger parallaksrulning til at trække dig ind i historien, introducere dig til karaktererne og afsløre mode om filmen.

Dogstudio

Dogstudios websteds umiddelbare attraktion er en smuk animeret 3D-hund – eller er det en ulv? – i midten af siden, der skalerer og roterer, mens du ruller din vej ned på parallax-siden. Dens belysning skifter farve, når du svæver over titlerne på Dogstudios nylige projekter, og måske er vores yndlingsbit, når den drejer sig foran en del af sidekopien og tilslører noget af teksten.

ToyFight

ToyFight er et prisvindende kreativt bureau, og dets hjemmeside er meget sjovt. Grundlæggerne Jonny Lander og Leigh Whipday har forvandlet sig til 3D-figurer, der vises i en række scener overalt på siden (inklusive denne frække Sagmeister & Walsh-reference). Smart brug af parallax forstærker 3D-effekten og parret med dristige, lyse, almindelige baggrunde bliver aldrig overvældende eller irriterende.

Diesel: BAD Guide

84.Paris oprettede dette imponerende parallax-websted (og tilknyttet social media-kampagne) som ledsagelse af lanceringen af Diesel “BAD-duft. Webstedet på en side præsenterer en række regler, der udgør” BAD Guide “.

Brugeren kan udforske ved at trække musen rundt på parallax-siden, som er lagt ud som et opslagstavle med billeder, der skal klikkes igennem. Der er råd om alt fra Tinder (“Stryg til højre, højre, højre, højre – du vil sortere dem ud senere “) til Instagram (” Glem ikke at komme i kontakt med en eks på torsdage #TBT “) ledsaget af monokrome illustrationer.

Firewatch

En af smukkeste eksempler på parallaksrulning, vi har set, er dette websted til spillet Firewatch, der bruger seks bevægelige lag for at skabe en dybdefølelse. Det er fantastisk, fordi der ikke er nogen rullekapring (noget, der ofte ledsager parallakseffekten), og det bruges kun øverst på siden – resten af siden er stadig, så du kan læse informationen uden at blive søsyg. Hvis du vil se, hvordan det gøres, er her en god demo på CodePen.

GitHub 404

GitHub “s 404-side er ikke strengt parallaksrulning, da effekten sker på musens vridning i modsætning til at rulle, men det er en rigtig sjov side, der bruger lagdeling for at tilføje dybde. I modsætning til “ordentlig” parallaks bevæger baggrunden sig hurtigere end forgrunden og skaber en desorienterende, anden verdenskendelig følelse.

Jess & Russ

Det er ingen overraskelse, at designmagtparret Russ Maschmeyer og Jessica Hisches bryllupswebsted er en skønhed at se. Webstedet kortlægger deres romantiske historie med parallaksrulning, der bruges igennem for at tilføje illustrationer dybde. De blev gift i 2012, men hjemmesiden er stadig et værd værd.

Make Your Money Matter

Finans og penge er næppe det mest interessante af emner. Men det New York-baserede digitale bureau Firstborn er spændende med dette dynamiske parallax-rullende websted Make Your Money Matter for the Public Service Credit Union.

Med det formål at lære offentligheden fordelene ved at blive medlem af en kreditunion, snarere end at bruge en bank, inkluderer dette strålende sted alt fra, hvordan en kreditforening fungerer, til hvor man kan finde en, og hvordan man ansøger, samt en lommeregner, der viser, hvor meget banker tjener på kundens indskud.

Madwell

Design- og udviklingsbureau Madwell, der er baseret i New York, viser sin portefølje med en række parallax-rulleeffekter for at skabe en mærkbar 3D-stil, der tilføjer en enorm dybde.

New York Times: Tomato Blues

I nutidens æra med lavt opmærksomhedsomfang og bidragsmedier, hvordan tiltrækker man folk til langvarig journalistik? Tomato Can Blues er et godt svar på dette problem fra New York Times, der kombinerer nogle smarte webdesignteknikker med historiefortælling og tegneserieinspirerede illustrationer skabt af Atilla Futaki.

Et af de bedste eksempler på parallax-rulning vi “set, artiklen fører dig gennem historien om en burkæmper skrevet af Mary Pilon. Når du ruller gennem indholdet, bliver illustrationerne levende med smarte animationer og ændringer, så du fuldt ud kan fordybe dig i indholdet.

Futakis illustrationer var baseret på politiets optegnelser, vidneregnskaber, fotografier og reporterens notater, og opmærksomheden på detaljer skinner igennem. Alt i alt er det en god læseoplevelse – er dette fremtiden for onlinejournalistik ?

Sne falder

Et af de første websteder til virkelig skubbe grænserne for, hvad du kunne gøre med langformigt redaktionelt indhold online, New York Times “Snow Fall-artikel kombinerer en række forskellige elementer, herunder parallaksrulning og webvideo.

Artiklen om rædsel ved en lavine ved Tunnel Creek blev offentliggjort online i december 2012, men står stadig stærkt som et eksempel på, hvad du kan gøre med parallaksrulning. Avisen præsenterede den Pulitzer-vindende artikel på en innovativ måde, der greb designfællesskabets opmærksomhed over hele verden.

• 19 virkelig nyttige responsive webdesign tutorials
• bedste eksterne harddiske
• Strålende designet 404 fejlsider