14 upeaa parallaksirullaavaa verkkosivustoa

Parallaksirullaus 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-efektin 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 loistavasti vaikuttamaan siihen, 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-animaatioesimerkit esittävät toisen upean tavan saada verkkosivustosi seisomaan ulos joukosta. Ja voit myös tutustua parhaisiin verkkosuunnittelutyökaluihimme, jotka ”auttavat sinua suunnittelutyössäsi. Katsotaanpa kuitenkin nyt joitain sivustoja, jotka käyttävät parallaksirullausta hyvin oikealla tavalla.

Verkkosuunnittelun taidehistoria

Taiteen ja web-suunnittelun historia ei ole aiheita, joita välttämättä laittaisit yhteen, mutta ne ovat kauniisti yhdistynyt tässä verkkosuunnittelun taidehistoriasivustossa, joka seuraa web-suunnittelun tulevaisuutta katsomalla taidetta ajan myötä.

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

Interaktiivinen Qoden luettelo

Qode Interactive Catalog -sovelluksessa on tyylitelty alatekstinavigointijärjestelmä paljastettavaksi kuvan jokaiselle tuotteelle. Luetteloa napsauttamalla näet vaakasuuntaisen parallaksirullan, jota käytetään esittelemään useita WordPress-teemoja. Se ei ole kaikkein uraauurtavin käyttö parallaksirullauksessa tässä luettelossa, mutta se palvelee tarkoitustaan hyvin. Animaation roiskeita käytetään myös hyvään vaikutukseen.

Kanavat

Marcus Brownin suunnittelema ja Aristide Benoistin kehittämä Canals vie sinut 400 vuoden matkalle Amsterdamin 1600-luvun kanavien historiaan. Sivusto on suunniteltu tarjoamaan toimituksellisen tyylisen kokemuksen , kuten selata rehevää sohvapöytämäärää, ja siinä käytetään paljon parallaksia kiinnittämään huomionne tarinan uusiin osiin ja antamaan sivustolle hienovarainen syvyysvaikutus.

The Gooniesin tarina

Jokaiselle tietyn ikäiselle on taattu rakkaus ”80s te fi Seikkailuelokuva, The Goonies, ja jos se sinäkin, niin tämä sivusto saa varmasti nostalgiarauhaset sykkiväksi. Joseph Berry on luonut WebFlown. The Story of The Goonies on kunnianosoitus retro-klassikolle, joka käyttää parallaksirullausta viemään sinut tarinaan, tutustuttamaan sinut hahmoihin ja paljastamaan elokuvan tilan.

koirastudio

Dogstudion sivuston välitön vetovoima on kaunis animoitu 3D-koira – vai onko se susi? – sivun keskellä, joka skaalautuu ja pyörii vierittäessäsi tiesi alas parallaksisivulta. Sen valaistus muuttaa väriä, kun siirrät hiiren osoitteen Dogstudion viimeaikaisten projektien päälle, ja ehkä suosikkibitti on, kun se pyörii osan sivukopion edessä ja peittää osan tekstistä.

ToyFight

ToyFight on palkittu luova toimisto, ja sen verkkosivusto on hauskaa. Perustajat Jonny Lander ja Leigh Whipday ovat muuttaneet itsensä 3D-hahmoiksi, jotka näkyvät eri 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.

Diesel: BAD Guide

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

Käyttäjä voi tutkia vetämällä hiirtä parallaksisivun ympäri, joka on asetettu kuin napsautettava kuvataulu. Siellä on neuvoja kaikesta Tinderistä (”Pyyhkäise oikealle, oikealle, oikealle, oikealle – lajittelet ne”) ulos myöhemmin ”) Instagramiin (” Älä unohda ottaa yhteyttä entiseen torstaisin #TBT ”), mustavalkoisten kuvien mukana.

Firewatch

Yksi kauneimpia esimerkkejä parallaksirullauksesta olemme nähneet tämä Firewatch-pelin verkkosivusto, 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 CodePenistä.

GitHub 404

GitHubin 404-sivu ei ole pelkästään parallaksirullausta, koska vaikutus tapahtuu hiiren heiluttamisessa vierityksen sijaan, mutta se on todella hauska sivu, joka käyttää kerrostusta syvyyden lisäämiseksi. Toisin kuin ”oikea” parallaksi, tausta liikkuu etualaa nopeammin, mikä luo epäsuuntaisen, toismaailmallisen tunnelman.

Jess & Russ

Ei ole mikään yllätys, että suunnitteluvoimaparin Russ Maschmeyerin ja Jessica Hischen häät -verkkosivusto on kauneus. 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.

Tee rahoilleen väliä

Rahoitus ja raha ovat tuskin kiinnostavimpia aiheita. Mutta New Yorkissa toimiva digitaalitoimisto Firstborn on tyytyväinen tähän dynaamiseen parallaksirullaussivustoon Make Your Money Matter for Public Service Credit Union.

Tarkoituksena opettaa yleisölle luottoyhteisöön liittymisen edut, Pankin käyttämisen lisäksi tämä loistava sivusto sisältää kaiken, mitä luotto-osuuskunta toimii, mistä löytää ja miten hakea, sekä laskimen, joka näyttää kuinka paljon pankit hyötyvät asiakkaan talletuksista.

Madwell

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

New York Times: Tomaatti voi bluesia

Kuinka houkuttelet ihmisiä pitkäaikaisessa journalismissa nykypäivän vähäisen tarkkaavaisuuden ja puremiskokoisen median aikakaudella? Tomato Can Blues on erinomainen vastaus New York Timesin ongelmaan, jossa yhdistetään älykkäitä verkkosuunnittelutekniikoita Atilla Futakin luomiin tarinankerronta- ja sarjakuvahenkisiin kuvituksiin.

Yksi parhaista esimerkeistä parallaksirullauksesta ”Olemme nähneet, artikkeli vie sinut läpi tarinaa häkkitaistelijasta, jonka on kirjoittanut Mary Pilon. Kun selaat sisältöä, kuvitukset heräävät eloon älykkäillä animaatioilla ja muunnelmilla, joiden avulla voit uppoutua täysin sisältöön.

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

Lumisade

Yksi ensimmäisistä sivustoista todella työntää rajoja siihen, mitä voisit tehdä pitkällisellä online-toimituksellisella sisällöllä, New York Timesin ”Lumisade” -artikkeli yhdistää joukon erilaisia elementtejä, mukaan lukien parallaksirullaus ja verkkovideo.

Artikkeli, joka käsittelee lumivyöryn kauhua Tunnel Creekissä, julkaistiin verkossa joulukuussa 2012, mutta se on edelleen vahva esimerkki siitä, mitä voit tehdä parallaksirullauksella. Sanomalehti esitteli Pulitzerin voittaneen artikkelin innovatiivisella tavalla, joka herätti designyhteisön huomion maailmanlaajuisesti.

• 19 todella hyödyllistä reagoivaa verkkosuunnitteluoppaat
• parhaat ulkoiset kiintolevyt
• Suunniteltu loistavasti 404 virhesivua