14 nuostabių paralaksinio slinkimo svetainių

paralaksinis slinkimas: interneto dizainas ir meno istorija
(Vaizdo kreditas: interneto dizainas ir meno istorija)

Paralakso slinkimas egzistuoja kurį laiką, tačiau tai yra viena iš tų interneto dizaino tendencijų, kuri tik tęsiasi. Paralakso slinkimas yra tada, kai svetainės maketas mato tinklalapio foną lėčiau judėdamas į priekį, sukdamas 3D efektą. Taupiai naudojant, tai gali suteikti gražų, subtilų gylio elementą, kuris sukuria išskirtinę ir įsimintiną svetainę.

Norėdami parodyti, kaip tai turėtų būti daroma, pateikiame keletą svetainių, kuriose ši technika naudojama puikiai. Kai kuriais atvejais paralakso slinkimas yra šou žvaigždė; kitose tai tiesiog suteikia gilumo, kuris, atrodo, kad priekinis planas šiek tiek iššoka.

Jei norite išstumti valtį, tai įspūdinga CSS animacija pavyzdžiai rodo dar vieną puikų būdą, kaip jūsų svetainė išsiskirti iš minios. Taip pat galite patikrinti mūsų geriausius dalykus interneto dizaino įrankiai tai padės jums kuriant dizainą. Tačiau kol kas pažvelkime į kai kurias svetaines, kuriose paralaksinis slinkimas naudojamas labai teisingai.



01. Interneto dizaino meno istorija

paralaksinis slinkimas: interneto dizainas ir meno istorija

Sužinokite apie meno istoriją naudodamiesi paralaksinio slinkimo efektais(Vaizdo kreditas: interneto dizainas ir meno istorija)

Meno istorija ir interneto dizainas nėra dalykai, kuriuos būtinai turėtumėte sujungti, tačiau jie yra labai vieningi interneto dizaino meno istorija svetainę, kuri stebi interneto dizaino ateitį, žvelgdama į meną per laiką.

Čia yra daugybė paralaksinio slinkimo būdų, o tai reiškia, kad vartotojai nuolat stebisi ir džiaugiasi slinkdami žemyn. Šį verta skirti šiek tiek laiko tyrinėjimams.

kokią kamerą naudoja profesionalus fotografas

02. Interaktyvusis „Qode“ katalogas

paralaksinis slinkimas

Toliau slinkite, kad galėtumėte ištirti čia siūlomas „WordPress“ temas(Vaizdo kreditas: „The Qode Interactive Catalogue“)

Interaktyvus „Qode“ katalogas turi stilizuotą apatinio teksto navigacijos sistemą, kuri atskleidžia kiekvieno elemento vaizdą. Spustelėjus katalogą, matomas horizontalus paralaksinis slinkimas, naudojamas norint parodyti įvairias „WordPress“ temas. Tai nėra pats novatoriškiausias paralakso slinkimo naudojimas šiame sąraše, tačiau jis puikiai tinka savo tikslui. Animacijos purslai taip pat naudojami geram efektui.

03. Kanalai

Paralakso slinkimas: kanalai

Kanalai yra tarsi lapai per didelę žurnalinį staliuką(Vaizdo kreditas: kanalai)

Sukūrė Marcusas Brownas ir sukūrė Aristide Benoist, Kanalai nukelia į 400 metų kelionę po Amsterdamo XVII a. kanalų istoriją. Svetainė sukurta tam, kad suteiktų redakcinio stiliaus patirtį, pavyzdžiui, lankytųsi sodrioje žurnalinio staliuko tome, ir joje puikiai naudojamas paralaksas, kad atkreiptumėte dėmesį į naujas jos istorijos dalis ir suteiktų svetainei subtilų gylio efektą.

04. „The Goonies“ istorija

Gaukite saldų 80-ųjų retro hitą čia(Vaizdo kreditas: „The Goonies“ istorija)

Kiekvienam tam tikro amžiaus vyrui garantuojamas meilės aštuntojo dešimtmečio paauglių nuotykių filmas „The Goonies“, o jei tai jūs, ši svetainė tikrai sukels jūsų nostalgijos liaukas. Sukūrė Josephas Berry naudodamas „WebFlow“, „Goonies“ istorija yra duoklė retro klasikai, kuri paralaksiniu slinkimu įtraukia jus į istoriją, supažindina su veikėjais ir atskleidžia filmo režimą.

05. Šunų studija

Animacinis 3D doggo yra šou žvaigždė čia [Vaizdas: Dogstudio]

Tiesioginis židinio traukimas Šunų studija svetainė yra gražus animacinis 3D šuo - ar tai vilkas? - puslapio viduryje tas mastelis ir sukimasis slenkant paralaksiniu puslapiu žemyn. Jo apšvietimas keičia spalvą, kai užvedate pelės žymeklį ant pastarųjų „Dogstudio“ projektų pavadinimų, ir galbūt mūsų mėgstamiausias dalykas yra tada, kai jis sukasi priešais kai kurias puslapio kopijas, užtemdydamas dalį teksto.

06. „Žaislų kova“

Tiek Jonny, tiek Leigh yra anatomiškai teisingi [Paveikslėlis: ToyFight]

„Žaislų kova“ yra apdovanojimus pelniusi kūrybinė agentūra, o jos svetainė yra labai smagi. Steigėjai Jonny Lander ir Leigh Whipday pavertė save 3D figūromis, kurios rodomos įvairiose scenose visoje svetainėje (įskaitant šią įžūlią „Sagmeister & Walsh“ nuorodą). Protingas paralakso naudojimas sustiprina 3D efektą ir kartu su drąsiais, ryškiais, paprastais fonais niekada netampa pribloškiančiu ar dirginančiu.

geriausias taškas ir šaudyti fotoaparatas Indija

07. Dyzelinas: blogas vadovas

paralaksinis slinkimas: Dyzelinas

„Diesel“ blogas vadovas veikia kaip virtuali iškaba [Paveikslėlis: Dyzelinas]

84. Paryžius sukūrė šią įspūdingą paralakso svetainę (ir su ja susijusią socialinės žiniasklaidos kampaniją) kartu su „Diesel BAD“ kvepalų pristatymu. Vieno puslapio svetainėje pateikiamos taisyklės, sudarančios „BAD vadovą“.

Vartotojas gali tyrinėti, vilkdamas pelę aplink paralaksės puslapį, kuris išdėstytas kaip vaizdų lenta, kurią galima spustelėti. Yra patarimų viskam, pradedant „Tinder“ („Perbraukite dešinėn, dešinėn, dešinėn, dešinėn - jūs sutvarkysite vėliau“) iki „Instagram“ („Nepamirškite susisiekti su buvusiuoju ketvirtadieniais #TBT“) kartu su vienspalvės iliustracijos.

08. Fejerverkas

kaip žingsniuoti ir pakartoti iliustratoriuje
Kiekvienas medžių sluoksnis juda savarankiškai [Paveikslėlis: Campo Santo]

Vienas gražiausių paralakso slinkimo pavyzdžių, kurį matėme, yra ši žaidimo svetainė Firewatch , kuris naudoja šešis judančius sluoksnius, kad sukurtų gylio pojūtį. Tai puiku, nes nėra užgrobimo ritinio (tai dažnai lydi paralaksinį efektą), ir jis naudojamas tik puslapio viršuje - likusi svetainės dalis vis dar yra tokia, kad galėtumėte perskaityti informaciją nesusirgdami jūra. Jei norite pamatyti, kaip tai daroma, pateikite gražią demonstracinę versiją „CodePen“ .

09. „GitHub“ 404

„GitHub 404“ pažeidžia paralaksės taisykles, kad atsirastų orientacijos sutrikimas [Paveikslėlis: GitHub]

404 „GitHub“ puslapis nėra griežtai paralaksinis slinkimas, nes poveikis pasireiškia pelės judėjimui, o ne slinkimui, tačiau tai tikrai įdomus puslapis, kuriame naudojamas sluoksniavimas, norint pridėti gylį. Skirtingai nuo „tinkamo“ paralakso, fonas juda greičiau nei priekinis planas, sukeldamas dezorientuojantį, kitonišką jausmą.

10. Jess & Russ

Paralakso slinkimas: ekrano kopija rodo moteriškos baltos suknelės iliustraciją, kurią naktį greitai perneša virš miesto panoramos

Kiekviena iliustracija turi gylio pojūtį [Vaizdas: Jess & Russ]

Nenuostabu, kad dizaino jėgos pora Russ Maschmeyer ir Jessica Hische's vestuvių svetainė yra grožis. Svetainėje pateikiama jų romantiška istorija. Paralaksų slinkimas naudojamas norint iliustracijoms suteikti daugiau gylio. Jie susituokė 2012 m., Tačiau svetainė vis dar verta dėmesio.

11. Uždirbk savo pinigus

Paralakso slinkimo svetainių pavyzdys: uždirbk savo pinigus

Tvarkykite savo finansus naudodamiesi „Make Your Money Matter“ informacija ir patarimais [Paveikslėlis: Viešųjų paslaugų kredito unija]

Finansai ir pinigai vargu ar yra patys įdomiausi dalykai. Tačiau Niujorke veikianti skaitmeninė agentūra Pirmagimis yra šioje dinamiškoje paralakso slinkties svetainėje Uždirbk savo pinigus valstybės tarnybos kredito unijai.

Siekdama išmokyti visuomenę įstoti į kredito uniją, o ne naudotis banku, naudos, ši puiki svetainė apima viską, pradedant kredito unijos veikimu, baigiant kur ją rasti ir kaip kreiptis, taip pat skaičiuokle, rodančia tiesiog kiek bankai pelno iš klientų indėlių.

12. Madvelas

paralaksinis slinkimas: Madvelas

geriausias būdas mokytis po efektų
Niujorko agentūra „Madwell“ naudoja paralaksinį slinkimą, kad suteiktų gilumo pojūtį [Paveikslėlis: Madwell]

Dizaino ir plėtros agentūra Madvelas , įsikūrusi Niujorke, demonstruoja savo portfelį su daugybe paralaksinio slinkimo efektų, kad sukurtų pastebimą 3D stilių, suteikiantį didžiulį gylį.

13. „New York Times“: pomidoras gali bliuzą

Graži patirtis turi būti patyrus šį paralaksą, slenkantį „New York Times“ straipsnį [Vaizdas:]

Kaip pritraukti žmones į ilgametę žurnalistiką šių dienų mažai skiriamų dėmesio ir įkandamos žiniasklaidos laikais? Pomidoras gali bliuzą yra puikus „New York Times“ atsakymas į šią problemą, derinant keletą sumanių interneto dizaino būdų su pasakojimo ir komiksų įkvėptomis iliustracijomis, kurias sukūrė Atilla Futaki.

Vienas iš geriausių paralakso slinkimo pavyzdžių, kurį mes matėme, šiame straipsnyje apžvelgiama nario kovotojo, kurį parašė Mary Pilon, istorija. Kai slenkate turinį, iliustracijos atgyja su protingomis animacijomis ir pakeitimais, leidžiančiomis visiškai pasinerti į turinį.

„Futaki“ iliustracijos buvo pagrįstos policijos įrašais, liudininkų pasakojimais, nuotraukomis ir žurnalistės užrašais, o dėmesys detalėms spindi. Apskritai tai puiki skaitymo patirtis - ar tai internetinės žurnalistikos ateitis?

14. Sniego kritimas

Paralakso slinkimo svetainių pavyzdys: sniegas

„New York Times“ straipsnis „Sniego kritimas“ pradėjo visiškai naują maniją dėl turtingų paralaksinių svetainių [Paveikslėlis: New York Times]

Viena iš pirmųjų svetainių, kuri iš tikrųjų peržengė ribas, ką galėtumėte padaryti su „longform“ redakciniu turiniu internete, „The New York Times“ Sniego kritimas straipsnis sujungia daugybę skirtingų elementų, įskaitant paralaksinį slinkimą ir internetinį vaizdo įrašą.

Straipsnis apie sniego lavinos siaubą Tunelio upelyje buvo paskelbtas internete 2012 m. Gruodžio mėn., Tačiau jis vis dar tvirtas kaip pavyzdys, ką galite padaryti su paralakso slinkimu. Laikraštis pristatė Pulitzerio laureatą novatorišku būdu, kuris patraukė dizaino bendruomenės dėmesį visame pasaulyje.

Susiję straipsniai: