14 upeaa parallaksirullaavaa verkkosivustoa

parallaksirullaus: verkkosuunnittelu ja taidehistoria
(Kuvan luotto: verkkosivujen suunnittelu ja taidehistoria)

Parallaksi-vieritys on ollut käytössä jonkin aikaa, mutta se on yksi niistä verkkosuunnittelutrendeistä, joka vain jatkuu. Parallaksi-vieritys on, kun verkkosivuston asettelu näkee verkkosivun taustan liikkuvan hitaammin etualalle luoden 3D-tehosteen vierittäessäsi. Säästämättömästi käytettynä se voi tarjota mukavan, hienovaraisen syvyyden elementin, joka johtaa erottuvaan ja mieleenpainuvaan verkkosivustoon.

Tässä on joitain sivustoja, jotka käyttävät tekniikkaa loistavaan vaikutukseen osoittaakseen, miten se tulisi tehdä. Joissakin tapauksissa parallaksirullaus on näyttelyn tähti; toisissa se yksinkertaisesti lisää ripaus syvyyttä, joka saa etualan näyttämään nousevan hieman.

Jos haluat todella työntää veneen ulos, nämä vaikuttavat CSS-animaatio esimerkit esittävät toisen upean tavan saada verkkosivustosi erottumaan joukosta. Ja voit myös tarkistaa parhaamme web-suunnittelutyökalut se auttaa sinua suunnittelupyrkimyksissäsi. Katsotaan kuitenkin toistaiseksi joitain sivustoja, jotka käyttävät parallaksirullausta hyvin oikealla tavalla.



01. Verkkosuunnittelun taiteen historia

parallaksirullaus: verkkosuunnittelu ja taidehistoria

Opi taidehistoriasta parallaksirullaustehosteiden avulla(Kuvan luotto: verkkosivujen suunnittelu ja taidehistoria)

Taiteen historia ja verkkosuunnittelu eivät ole aiheita, joita välttämättä koottaisiin, mutta ne ovat tässä kauniisti yhdistettyjä verkkosuunnittelun taiteen historia sivusto, joka seuraa web-suunnittelun tulevaisuutta katsomalla taidetta ajan myötä.

Täällä on useita parallaksirullaustekniikoita, mikä tarkoittaa, että käyttäjät ovat jatkuvasti yllättyneitä ja iloisia vierittäessään sivua alaspäin. Tämä kannattaa viettää vähän aikaa tutkimiseen.

miten luoda ideointitaulu

02. Qoden interaktiivinen luettelo

parallaksi vieritys

Jatka vierittämistä tutkiaksesi täällä tarjolla olevia WordPress-teemoja(Kuvan luotto: The Qode Interactive Catalogue)

Qode Interactive Catalogue on tyylitelty alaosan tekstinavigointijärjestelmä, joka paljastaa kuvan jokaiselle kohteelle. Luetteloa napsauttamalla näet vaakasuuntaisen parallaksirullan, jota käytetään esittelemään useita WordPress-teemoja. Se ei ole parallaksirullauksen uraauurtavin käyttö tässä luettelossa, mutta se palvelee tarkoitustaan ​​hyvin. Animaation roiskeita käytetään myös hyvään vaikutukseen.

03. Kanavat

Parallaksirulla: kanavat

Kanavat ovat kuin selaa suurta sohvapöytäkirjaa(Kuvan luotto: kanavat)

Suunnittelija Marcus Brown ja Aristide Benoist, Kanavat vie sinut 400 vuoden matkalle Amsterdamin 1600-luvun kanavien historiaan. Sivusto on suunniteltu tarjoamaan toimituksellisen tyylinen kokemus, kuten selaaminen rehevän sohvapöydän läpi, ja se käyttää paljon parallaksia kiinnittämään huomionne tarinan uusiin osiin ja antamaan sivustolle hienovaraisen syvyysvaikutuksen.

04. Goonien tarina

Parallaksirulla: The Gooniesin tarina

Hanki suloinen 80-luvun retro-hitti täältä(Kuvan luotto: The Gooniesin tarina)

Kenelle tahansa tietystä iästä on taattu 80-luvun rakkauden teini-seikkailu, The Goonies, ja jos olet sinä, tämä sivusto saa varmasti nostalgiarauhaset sykkiväksi. Luonut Joseph Berry WebFlow'n avulla, Goonien tarina on kunnianosoitus retro-klassikolle, joka käyttää parallaksirullausta viemään sinut tarinaan, tutustuttamaan sinut hahmoihin ja paljastamaan elokuvan tilan.

05. Koirastudio

Parallaksin vieritys: DogStudio

Animoitu 3D-doggo on näyttelyn tähti täällä [Kuva: Dogstudio]

Välitön keskitetty vetovoima Koirastudio Sivusto on kaunis animoitu 3D-koira - vai onko se susi? - sivun keskellä se skaalautuu ja pyörii vierittäessäsi alas parallaksisivua. Sen valaistus muuttaa väriä, kun siirrät hiiren Dogstudion viimeaikaisten projektien otsikoiden päälle, ja ehkä suosikkipikku on, kun se pyörii osan sivukopion edessä ja peittää osan tekstistä.

06. ToyFight

Parallaksin vieritys: ToyFight

Sekä Jonny että Leigh ovat anatomisesti oikeat [Kuva: ToyFight]

LeluFight on palkittu luova toimisto, ja sen verkkosivusto on hauskaa. Perustajat Jonny Lander ja Leigh Whipday ovat muuttaneet itsensä 3D-hahmoiksi, jotka näkyvät useissa kohtauksissa koko sivustolla (mukaan lukien tämä röyhkeä Sagmeister & Walsh -viite). Parallaksin älykäs käyttö vahvistaa 3D-vaikutusta, ja pariksi rohkeat, kirkkaat, selkeät taustat eivät koskaan tule ylivoimaisiksi tai ärsyttäviksi.

07. Diesel: huono opas

parallaksirulla: Diesel

Dieselin BAD Guide toimii kuin virtuaalinen kartonki [Kuva: Diesel]

84.Pariisi loi tämän vaikuttavan parallaksisivuston (ja siihen liittyvän sosiaalisen median kampanjan) Dieselin BAD-tuoksun lanseerauksen mukana. Yhden sivun sivusto esittelee sarjan sääntöjä, jotka muodostavat BAD-oppaan.

kuinka valita piste ja ampua kamera

Käyttäjä voi tutkia vetämällä hiirtä parallaksisivun ympäri, joka on asetettu kuin kuvataulu, jonka läpi napsautetaan. Siellä on neuvoja kaikesta Tinderistä ('Pyyhkäise oikealle, oikealle, oikealle, oikealle - lajittelet ne myöhemmin' ') Instagramiin (' Älä unohda ottaa yhteyttä entiseen torstaisin #TBT '), mukana yksiväriset kuvat.

08. Tulipalo

Näyttökuva Firewatch-verkkosivustosta näyttää kuvan retkeilijästä, joka katselee kultaisen kanjonin yli aamunkoitteessa

Jokainen puukerros liikkuu itsenäisesti [Kuva: Campo Santo]

Yksi kauneimmista esimerkeistä parallaksirullauksesta, jonka olemme nähneet, on tämä pelisivusto Tulipalo , joka käyttää kuutta liikkuvaa kerrosta syvyyden tunteen luomiseen. Se on hienoa, koska vierityskaappausta ei tapahdu (jotain, joka usein liittyy parallaksivaikutukseen), ja sitä käytetään vain sivun yläosassa - loppuosa sivustosta on edelleen niin, että voit lukea tietoja saamatta merisairautta. Jos haluat nähdä, miten se on tehty, tässä on mukava esittely CodePen .

kuinka maalata vaaka Photoshopissa

09. GitHub 404

Parallaksin vieritys: kuvakaappaus GitHubista

GitHubin 404 rikkoo parallaksin sääntöjä vääristävän vaikutuksen aikaansaamiseksi [Kuva: GitHub]

GitHubin 404 sivu ei ole pelkästään parallaksirullausta, koska vaikutus tapahtuu hiiren heiluttamiseen eikä vieritykseen, mutta se on todella hauska sivu, joka käyttää kerrostusta syvyyden lisäämiseksi. Toisin kuin '' oikea '' parallaksi, tausta liikkuu etualaa nopeammin ja luo epäsuuntaisen, toismaailmallisen tunnelman.

10. Jess & Russ

Parallaksin vieritys: kuvakaappaus näyttää kuvan valkoisessa mekossa olevasta naisesta, jota nopeasti kuljettaa kaupungin horisontin yli yöllä

Jokaisessa kuvassa on syvyyden tunne [Kuva: Jess & Russ]

Ei ole mikään yllätys, että suunnitteluvoimapari Russ Maschmeyer ja Jessica Hische häät verkkosivuilla on kauneus katsella. Sivusto kuvaa heidän romanttisen tarinansa, ja parallaksirullaa käytetään kuvien syvyyden lisäämiseksi. He menivät naimisiin vuonna 2012, mutta verkkosivusto on silti näkemisen arvoinen.

11. Ansaitse rahaa

Esimerkki parallaksirullaavista verkkosivustoista: Ansaitse rahaa

Hallinnoi talouttasi antamalla rahaa ja rahaa -palvelun tietoja ja neuvoja [Kuva: Public Service Credit Union]

Rahoitus ja raha ovat tuskin mielenkiintoisimpia aiheita. Mutta New Yorkissa toimiva digitaalitoimisto Esikoinen on tässä dynaamisessa parallaksirullaussivustossa Ansaitse rahaa julkisen palvelun luottoyhteisölle.

Tämän loistavan sivuston tarkoituksena on opettaa yleisölle luottoyhteisöön liittymisen edut pankin käytön sijaan, mutta se sisältää kaiken, mitä luotto-osuuskunta toimii, mistä löytää ja miten hakea, sekä laskimen, joka näyttää vain kuinka paljon pankit hyötyvät asiakkaan talletuksista.

12. Madwell

parallaksirulla: Madwell

paras kosketusnäyttö kannettava tietokone taiteilijoille
New Yorkin toimisto Madwell lisää parallaksirullausta syvyyden tunteen lisäämiseksi [Kuva: Madwell]

Suunnittelu- ja kehitystoimisto Madwell , joka sijaitsee New Yorkissa, esittelee salkunsa useilla parallaksirullauksilla, jotta saadaan aikaan huomattava 3D-tyyli, joka lisää valtavasti syvyyttä.

13. New York Times: Tomaatti voi bluesia

Esimerkkejä parallaksirullaavista verkkosivustoista: New York Times

Tämän parallaksirullaavan New York Times -artikkelin kanssa on saatava kaunis kokemus [Kuva:]

Kuinka houkutella ihmisiä nykypäivän journalismiin nykypäivän vähäisen tarkkaavaisuuden ja puremakokoisen median aikakaudella? Tomaatti voi bluesia on loistava vastaus New York Timesin ongelmaan, yhdistämällä älykkäitä verkkosuunnittelutekniikoita Atilla Futakin luomiin tarinankerronta- ja sarjakuvahenkisiin kuvituksiin.

Yksi parhaista esimerkeistä nähtyämme parallaksirullausta, artikkeli vie sinut läpi Mary Pilonin kirjoittaman tarinan häkkitaistelijasta. Kun selaat sisältöä, piirrokset heräävät eloon älykkäiden animaatioiden ja muutosten avulla, jolloin voit uppoutua täysin sisältöön.

Futakin kuvat perustuivat poliisitietoihin, todistajien kertomuksiin, valokuviin ja toimittajan muistiinpanoihin, ja huomio yksityiskohtiin loistaa. Kaiken kaikkiaan se on hieno lukukokemus - onko tämä online-journalismin tulevaisuus?

14. Lumisade

Esimerkki parallaksirullaavista verkkosivustoista: Lumisade

New York Timesin Snow Fall -artikkeli aloitti aivan uuden villityksen rikkaille parallaksisivustoille [Kuva: New York Times]

Yksi ensimmäisistä sivustoista, joka todella ylitti rajoja sille, mitä voisit tehdä pitkällisellä online-toimituksellisella sisällöllä, New York Times Lumisade Artikkelissa yhdistyvät joukko erilaisia ​​elementtejä, mukaan lukien parallaksirullaus ja verkkovideo.

Tunnel Creekin lumivyöryn kauhusta julkaistu artikkeli julkaistiin verkossa joulukuussa 2012, mutta se on silti vahva esimerkki siitä, mitä voit tehdä parallaksirullauksella. Sanomalehti esitteli Pulitzer-palkitun artikkelin innovatiivisella tavalla, joka herätti designyhteisön huomion maailmanlaajuisesti.

Aiheeseen liittyvät artikkelit: