14 fantastiske parallax-rullende websteder
Parallaksrulning har eksisteret i et stykke tid, men det er en af de tendenser til webdesign, 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 steder, 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 se lidt ud.
Hvis du har lyst til virkelig at skubbe båden ud, er disse imponerende CSS animation eksempler viser en anden god måde at få dit websted til at skille sig ud fra mængden. Og du kan også se vores bedste værktøjer til webdesign det vil hjælpe dig i dit design bestræbelser. For nu, lad os dog se på nogle websteder, der bruger parallax-rulning på meget den rigtige måde.
01. Webdesign kunsthistorie
Historien om kunst og webdesign er ikke emner, du nødvendigvis vil sammensætte, men de er smukt forenet i dette webdesign kunsthistorie websted, der sporer fremtiden for webdesign 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.
02. Qode Interactive Catalog
Det Qode interaktivt katalog har et stiliseret tekstnavigationssystem i bunden til at afsløre et billede for hvert element. 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 parallax-rulning på denne liste, men det tjener sit formål godt. Et stænk af animation bruges også til god effekt.
03. Kanaler
Designet af Marcus Brown og udviklet af Aristide Benoist, Kanaler tager 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 parallaks for at henlede opmærksomheden på nye sektioner af sin historie og for at give webstedet en subtil dybdeeffekt.
04. Historien om Goonies
Enhver i en bestemt alder er garanteret kærlighed fra 80'erne teenageventyr, The Goonies, og hvis det er dig, vil dette sted helt sikkert få dine nostalgi-kirtler til at banke. Oprettet af Joseph Berry ved hjælp af WebFlow, Historien om de goonies er en hyldest til en retroklassiker, der bruger parallaksrulning til at trække dig ind i historien, introducere dig til karaktererne og afsløre tilstand om filmen.
05. Dogstudio
Den umiddelbare fokale attraktion for Dogstudio websted er en smuk animeret 3D-hund - eller er det en ulv? - i midten af siden skaleres og roteres, når du ruller dig ned ad 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.
06. 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 parres med dristige, lyse, almindelige baggrunde bliver aldrig overvældende eller irriterende.
07. Diesel: DÅRLIG guide
84. Paris skabte denne imponerende parallax-webside (og tilknyttet social media-kampagne) til at ledsage lanceringen af Diesels BAD-duft. På siden med en side præsenteres den række regler, der udgør 'BAD Guide'.
Brugeren kan udforske ved at trække musen rundt om 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 ordner dem senere') til Instagram ('Glem ikke at komme i kontakt med en eks på torsdage #TBT'), ledsaget af monokrome illustrationer.
08. Firewatch
Et af de smukkeste eksempler på parallaksrulning, vi har set, er dette websted til spillet Firewatch , der bruger seks lag i bevægelse for at skabe en følelse af dybde. 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 er gjort, er her en god demo CodePen .
09. GitHub 404
GitHubs 404-side er ikke strengt parallaksrulning, da effekten sker på musens vridning i modsætning til 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, hvilket skaber en desorienterende, andenverdig følelse.
10. Jess & Russ
Det er ingen overraskelse, at designmagtparret Russ Maschmeyer og Jessica Hische's 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 besøg værd.
11. Gør dine penge vigtige
Finans og penge er næppe det mest interessante af emner. Men New York-baseret digitalt bureau Førstefødte er quids i med denne dynamiske parallax-rullende webside Gør dine penge vigtige for Public Service Credit Union.
Med det formål at lære offentligheden fordelene ved at tilmelde sig en kreditunion snarere end at bruge en bank, inkluderer dette strålende websted alt fra, hvordan en kreditunion fungerer, til hvor man kan finde en og hvordan man ansøger, samt en lommeregner, der viser hvor meget banker tjener på kundens indskud.
12. Madwell
Design- og udviklingsbureau Madwell , 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.
13. New York Times: Tomat Can Blues
Hvordan tiltrækker man mennesker til langvarig journalistik i nutidens æra med spændvidde og små medier Tomat 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å parallaksrulning, vi har 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å politiregistre, vidneregnskaber, fotografier og reporterens noter, og opmærksomheden på detaljer skinner igennem. Alt i alt er det en fantastisk læseoplevelse - er dette fremtiden for onlinejournalistik?
14. Sne falder
Et af de første steder, der virkelig skubber grænserne for, hvad du kan gøre med redaktionelt indhold i lang form online, New York Times ' Sne falder artiklen kombinerer en række forskellige elementer, herunder parallaksrulning og webvideo.
Artiklen, om rædslen ved en lavine ved Tunnel Creek, blev offentliggjort online i december 2012, men står stadig stærk 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.
Relaterede artikler:
