14 zapanjujućih web stranica s paralaksnim pomicanjem

pomicanje paralaksom: web dizajn i povijest umjetnosti
(Slika: Web dizajn i povijest umjetnosti)

Pomicanje po Parallaxu postoji već neko vrijeme, ali to je jedan od onih trendova web dizajna koji se nastavlja. Parallax pomicanje je kada izgled web stranice vidi pozadinu web stranice koja se sporije kreće u prvi plan, stvarajući 3D efekt tijekom pomicanja. Umjereno korišten, može pružiti lijep, suptilan element dubine koji rezultira prepoznatljivim i nezaboravnim web mjestom.

Da bismo pokazali kako to treba učiniti, evo nekoliko web mjesta koja koriste tehniku ​​briljantno. U nekim je slučajevima paralaksno pomicanje zvijezda emisije; u drugima jednostavno dodaje dašak dubine zbog kojeg se čini da prvi plan pomalo iskače.



Ako stvarno želite istisnuti brod, ovi impresivni CSS animacija primjeri pokazuju još jedan sjajan način da vaše web mjesto istakne gomilu. A također možete provjeriti naše najbolje alati za web dizajn to će vam pomoći u dizajnerskim naporima. Za sada, pogledajmo neke web stranice koje koriste paralaksno pomicanje na vrlo ispravan način.



01. Povijest umjetnosti web dizajna

pomicanje paralaksom: web dizajn i povijest umjetnosti

Učite o povijesti umjetnosti kroz niz paralaksnih efekata pomicanja(Slika zaslužna za web dizajn i povijest umjetnosti)

Povijest umjetnosti i web dizajna nisu predmeti koje biste nužno sastavili, ali u tome su lijepo ujedinjeni povijest umjetnosti web dizajna web mjesto koje prati budućnost web dizajna promatrajući umjetnost kroz vrijeme.



Ovdje se igra niz tehnika paralaksnog pomicanja, što znači da su korisnici neprestano iznenađeni i oduševljeni dok se pomiču po stranici. Ovaj vrijedi potrošiti malo vremena na istraživanje.

najbolja kamera za slikanje umjetničkih djela

02. Interaktivni katalog Qode

pomicanje paralaksa

Nastavite pomicati kako biste istražili WordPress teme koje se ovdje nude(Slika: Interaktivni katalog Qode)

The Qode interaktivni katalog ima stilizirani donji tekstualni navigacijski sustav za otkrivanje slike za svaku stavku. Klikom na katalog zatim se vidi horizontalno paralaksno pomicanje koje se koristi za prikaz niza WordPress tema. Nije najotmjenija uporaba pomicanja paralaksa na ovom popisu, ali dobro služi svojoj svrsi. Prskanje animacije također se koristi s dobrim učinkom.



03. Kanali

Pomicanje paralaksa: Kanali

Canals je poput listanja velike knjige stolića(Slika zaslužna za kanale)

Dizajnirao Marcus Brown i razvio Aristide Benoist, Kanali vodi vas na 400-godišnje putovanje kroz povijest amsterdamskih kanala 17. stoljeća. Web mjesto dizajnirano je da pruži doživljaj u uredničkom stilu, poput listanja bujnog volumena stolića, i sjajno koristi paralaksu kako bi vam skrenuo pažnju na nove odjeljke svoje priče i kako bi web mjestu dalo suptilan dubinski efekt.

04. Priča o Goonies

Pomicanje po paralaksi: Priča o Goonies

Nabavite ovdje slatki retro hit iz 80-ih(Slika zaslužna za priču o Goonies)

Svatko u određenoj dobi zagarantiran je ljubavnim tinejdžerskim avanturama iz 80-ih, Goonies, a ako ste to vi, ova će vam web stranica sigurno pulsirati. Izradio Joseph Berry koristeći WebFlow, Priča o Goonies je posveta retro klasiku koji koristi paralaksno pomicanje da vas uvuče u priču, upozna s likovima i otkrije način rada o filmu.

05. Dogstudio

Pomicanje po paralaksi: DogStudio

Animirani 3D doggo zvijezda je emisije ovdje [Slika: Dogstudio]

Neposredna žarišna privlačnost Dogstudio Stranica je prekrasnog animiranog 3D psa - ili je to vuk? - u središtu stranice, koja se skalira i rotira dok se pomičete niz stranicu paralaksa. Njegova rasvjeta mijenja boju dok lebdite iznad naslova nedavnih Dogstudiovih projekata, a možda nam je najdraži trenutak kada se okreće ispred neke kopije stranice, zastirući dio teksta.

macbook pro tvrdi uvez 15 inča

06. ToyFight

Pomicanje paralaksa: ToyFight

I Jonny i Leigh su anatomski ispravni [Slika: ToyFight]

ToyFight je nagrađivana kreativna agencija, a njezino web mjesto je jako zabavno. Osnivači Jonny Lander i Leigh Whipday pretvorili su se u 3D figure koje se pojavljuju u nizu scena na cijeloj stranici (uključujući ovu drsku referencu Sagmeister & Walsh). Pametna upotreba paralaksa pojačava 3D efekt, a uparen sa podebljanim, svijetlim, običnim pozadinama, nikad ne postaje neodoljiv ili iritantan.

07. Dizel: LOŠ Vodič

pomicanje paralaksa: Dizel

Dieselov BAD Vodič djeluje poput virtualne osnove [Slika: Diesel]

84.Pariz stvorio je ovu impresivnu web stranicu paralaksa (i povezanu kampanju na društvenim mrežama) kao dodatak lansiranju Dieselova BAD mirisa. Web stranica s jednom stranicom predstavlja niz pravila koja čine 'LOŠE Vodič'.

Korisnik može istraživati ​​povlačenjem miša oko paralaksne stranice koja je postavljena poput osovine slika za klikanje. Tu su savjeti o svemu, od Tindera ('Prevucite prstom udesno, udesno, udesno, udesno - riješit ćete ih kasnije') do Instagrama ('Ne zaboravite stupiti u kontakt s bivšim četvrtkom #TBT'), popraćen jednobojne ilustracije.

kako slikati vage u

08. Vatrogasac

Snimka zaslona web stranice Firewatch prikazuje ilustraciju planinara koji u zoru gleda preko zlatnog kanjona

Svaki se sloj drveća kreće neovisno [Slika: Campo Santo]

Jedan od najljepših primjera pomicanja paralaksa koji smo vidjeli je ovo web mjesto za igru Vatrogasac , koji koristi šest pokretnih slojeva za stvaranje osjećaja dubine. Izvrsno je jer nema otmice pomicanja (nešto što često prati efekt paralakse), a koristi se samo na vrhu stranice - ostatak je web stranice još uvijek tako da informacije možete čitati bez morske bolesti. Ako želite vidjeti kako se to radi, evo lijepe demonstracije CodePen .

09. GitHub 404

Pomicanje po paralaksi: snimka zaslona GitHub-a

GitHub-ov 404 krši pravila paralakse radi dezorijentirajućeg efekta [Slika: GitHub]

GitHubova 404 stranica nije striktno paralaksno pomicanje jer se učinak događa na migovanje mišem, za razliku od pomicanja, ali to je stvarno zabavna stranica koja koristi slojeve za dodavanje dubine. Za razliku od 'pravilne' paralakse, pozadina se kreće brže od prvog plana, stvarajući dezorijentirajući, onostrani osjećaj.

10. Jess i Russ

Pomicanje po paralaksi: snimak zaslona prikazuje ilustraciju žene u bijeloj haljini koju noću brzo nosi iznad gradskog horizonta

Svaka ilustracija ima osjećaj dubine [Slika: Jess & Russ]

Nije iznenađenje da dizajnerski par Russ Maschmeyer i Jessica Hische web stranica za vjenčanja je ljepota za gledati. Stranica prikazuje njihovu romantičnu priču, paralelnim pomicanjem koje se koristi za dodavanje dubine ilustracijama. Vjenčali su se 2012. godine, ali web mjesto još uvijek vrijedi pogledati.

11. Zaradite svoj novac

Primjer paralaksnog pomicanja web stranica: Zaradite svoj novac

Upravljajte svojim financijama informacijama i savjetima iz programa Make Your Money Matter [Slika: Kreditna unija javnih službi]

Financije i novac nisu jedva najzanimljivija tema. Ali digitalna agencija sa sjedištem u New Yorku Prvorođenče koristi ovu dinamičnu web stranicu za pomicanje paralaksa Zaradite svoj novac za Kreditnu uniju javnih usluga.

S ciljem podučavanja javnosti o blagodatima pridruživanja kreditnoj uniji, a ne korištenju banke, ova briljantna web stranica sadrži sve, od načina na koji kreditna unija djeluje, mjesta gdje se može pronaći i kako se prijaviti, kao i kalkulator koji pokazuje samo koliko banke profitiraju od depozita klijenta.

12. Madwell

pomicanje paralaksa: Madwell

zvijezda ratovi lupež jedan službeni poster
Newyorška agencija Madwell koristi paralaksno pomicanje kako bi dodala osjećaj dubine [Slika: Madwell]

Agencija za dizajn i razvoj Madwell , sa sjedištem u New Yorku, prikazuje svoj portfelj nizom paralaksnih efekata pomicanja kako bi stvorio primjetan 3D stil koji dodaje ogromnu dubinu.

13. New York Times: Bluza od rajčice može

Primjeri web mjesta s pomicanjem paralaksa: New York Times

Predivno iskustvo treba doživjeti s ovim paralaksnim pomicanjem članka iz New York Timesa [Slika:]

U današnjoj eri slabe pozornosti i medijima veličine zalogaja, kako privući ljude da se bave dugim novinarstvom? Bluza od rajčice sjajan je odgovor na taj problem New York Timesa, kombinirajući neke pametne tehnike web dizajna s pričanjem priča i ilustracijama nadahnutim stripovima koje je stvorila Atilla Futaki.

Jedan od najboljih primjera pomicanja paralaksa koji smo vidjeli, članak vas vodi kroz priču o borcu u kavezu koju je napisala Mary Pilon. Dok se krećete kroz sadržaj, ilustracije oživljavaju pametnim animacijama i preinakama, što vam omogućuje da se u potpunosti uronite u sadržaj.

Futakijeve su se ilustracije temeljile na policijskim evidencijama, izvještajima svjedoka, fotografijama i bilješkama reportera, a pažnja prema detaljima blista. Sve u svemu, izvrsno je iskustvo čitanja - je li ovo budućnost internetskog novinarstva?

14. Snježni pad

Primjer web mjesta s pomicanjem paralaksa: Pad snijega

Članak 'Snow Fall' iz New York Timesa pokrenuo je posve novu pomamu za bogatim web lokacijama paralaksa [Slika: New York Times]

Jedna od prvih web lokacija koja je stvarno pomaknula granice onoga što biste mogli učiniti s uredničkim sadržajem dugog formata na mreži, New York Times ' Snježni pad Članak kombinira niz različitih elemenata, uključujući paralaksno pomicanje i web video.

Članak o užasu lavine u Tunnel Creeku objavljen je na mreži u prosincu 2012. godine, ali još uvijek ostaje snažan primjer kao primjer onoga što možete učiniti pomicanjem paralaksa. Novine su Pulitzerovim člankom predstavile članak na inovativan način koji je privukao pozornost dizajnerske zajednice širom svijeta.

Povezani članci: