Sadržaj
- 13 zapanjujućih web stranica s paralaksnim pomicanjem
- 01. Povijest umjetnosti web dizajna
- 02. Interaktivni katalog Qode
- 03. Kanali
- 04. Priča o Goonies
- 05. Dogstudio
- 06. ToyFight
- 07. Dizel: LOŠ Vodič
- 08. Vatrogasac
- 13. Snježni pad
Parallax pomicanje jedan je od onih trendova web dizajna koji se nastavlja, a postoje web stranice koje ga sjajno koriste. Tehnika uključuje oblikovanje pozadine izgleda web stranice kako bi se kretao sporije od prvog plana kada se korisnik pomiče, stvarajući efekt sličan 3D-u.
Umjereno korišteno, paralaksno pomicanje može dodati suptilan element dubine zbog kojeg se čini da se prvi plan ističe. U nekim se slučajevima koristi kao glavna zvijezda emisije za velik vizualni utjecaj. Primjeri u nastavku pokazuju kako se tehnika može koristiti u različitom stupnju za stvaranje prepoznatljivih i nezaboravnih web stranica.
Za više informacija o web dizajnu pogledajte naš vodič za najbolje alate za web dizajn i najbolje žičane alate koji će vam pomoći u vašim dizajnerskim naporima. Ako želite izbaciti brod, ovi impresivni primjeri CSS animacije pokazuju još jedan sjajan način da vaše web mjesto istakne gomilu. Želite li pojednostaviti stvari? Treba vam graditelj web stranica. Za sada je ovdje 13 stranica koje pokazuju kako treba raditi paralaksno pomicanje.
13 zapanjujućih web stranica s paralaksnim pomicanjem
01. Povijest umjetnosti web dizajna
Povijest umjetnosti i povijest web dizajna nisu dvije teme koje biste nužno trebali sastaviti, ali su lijepo kombinirane u zadivljujućoj povijesti umjetnosti web dizajna web mjesta, što čini slučaj za web dizajn kao oblik umjetnosti.
Web stranica prati povijest i budućnost web dizajna gledajući povijest umjetnosti, koristeći čitav niz tehnika paralaksnog pomicanja kako bi pružila stalno iznenađenje i oduševljenje dok se pomičete prema dolje po stranici. Različite tehnike neprestano dolaze, ali sve imaju svrhu, održavajući gledatelja uključenim u priču. S nizom poveznica na zanimljive primjere, ovo je mjesto koje vrijedi potrošiti malo vremena na istraživanje i probavu.
02. Interaktivni katalog Qode
Qode interaktivni katalog započinje paralaksnim pomicanjem u uvodu. Pomaknite se pored toga i dolazite do stiliziranog izbornika koji otkriva sliku kad se pomiče svako ime teme WordPressa. Klik na naziv svake teme vodi vas do pomičnog portfelja primjera aplikacija koji pokazuju njegove mogućnosti dizajna.
Nije najosnovnija upotreba pomicanja paralaksom na ovom popisu, ali pokazuje kako se tehnika može koristiti u jasne svrhe i za poboljšanje korisničkog iskustva. Kroz paralaksno pomicanje, Qode učinkovito prikazuje niz aplikacija za svaku temu na način koji utječe. Raspršivanje animacije također se koristi s dobrim učinkom na ovoj stranici.
03. Kanali
Dizajnirao Marcus Brown i razvio Aristide Benoist, Canals nas vodi na 400-godišnje putovanje kroz stvaranje i povijest amsterdamskih kanala, koji su izgrađeni u 17. stoljeću. Web mjesto dizajnirano je za pružanje iskustva u uređivačkom stilu usporedivo s listanjem bujno proizvedenog volumena stolića. Njegovo glatko vodoravno pomicanje izvrsno koristi paralaksu kako bi skrenulo pažnju na svaki novi odjeljak priče i kako bi mjesto imalo suptilan dojam dubine.
04. Priča o Goonies
Svatko određene dobi zajamčeno je da je bio obožavatelj tinejdžerskog filma The Goonies iz 80-ih. Ako ste to vi, onda će ova stranica sigurno potaknuti nostalgiju. Stvorio Joseph Berry pomoću WebFlowa, The Story of the Goonies nježna je počast retro klasiku. Koristi paralaksno pomicanje kako bi privukao gledatelje u priču, a zatim predstavio likove i otkrio više o filmu.
05. Dogstudio
Glavna atrakcija web stranice Dogstudio je prekrasan animirani 3D pas - ili je to vuk? - u sredini stranice. Animirani se pseći skalira i okreće dok se pomičete prema dolje po stranici paralaksa. Njegova rasvjeta mijenja boju dok lebdite iznad naslova nedavnih Dogstudiovih projekata. Možda je naš omiljeni dodir to što se pas u jednom trenutku okreće ispred neke kopije stranice, zaklanjajući dio teksta i stvarajući dodatnu dubinu. To je vrlo glatka prezentacija.
06. ToyFight
Nagrađivana kreativna agencija ToyFight zabavlja se svojim web mjestima. Osnivači Jonny Lander i Leigh Whipday izgledaju transformirani u 3D figure koje se pojavljuju u nizu situacija na cijeloj web lokaciji (uključujući drsku referencu Sagmeister & Walsh gore). Pametna upotreba paralaksnog pomicanja pojačava 3D efekt web stranice, a da nikad ne postane nadmoćna ili iritantna. Uparen sa podebljanim, običnim pozadinama, nudi zanimljivu prezentaciju agencije.
07. Dizel: LOŠ Vodič
Ova web stranica od jedne stranice razvijena je za predstavljanje Dieselovog BAD mirisa za muškarce. Dizajnirao 84.Paris, predstavlja niz pravila koja čine 'LOŠE Vodič', koji je popraćen kampanjom na društvenim mrežama.
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 ('Prijeđite 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.
08. Vatrogasac
Kao i gore navedena stranica GitHub 404, ovo nije upravo paralaksno pomicanje, ali upotreba plutajućih slojeva pokrenutih pomicanjem miša dodaje ogromnu dubinu za stvaranje nezaboravnog 3D stila na web stranici njujorške agencije za dizajn i razvoj Madwella.
13. Snježni pad
Još jedan članak iz New York Timesa, članak Snow Fall kombinira čitav niz različitih resursa, uključujući pomicanje paralaksom i web video zapise, kako bi ispričao priču o užasu lavine u Tunnel Creeku.
Objavljen je na mreži u prosincu 2012., ali i dalje ostaje snažan primjer kao primjer onoga što možete učiniti s paralaksnim pomicanjem. Novine su Pulitzerovim člankom predstavile članak na inovativan način koji je privukao pozornost dizajnerske zajednice širom svijeta i učinio ga jednim od prvih novinskih mjesta koje su pomakle granice onoga što se može učiniti s uredničkim sadržajem dugog formata na mreži.
