14 site-uri uimitoare de defilare în paralaxă

Defilarea în paralelă este de ceva vreme, dar este una dintre acele tendințe de design web care continuă. Defilarea în paralel este atunci când aspectul site-ului vede fundalul paginii web deplasându-se cu o viteză mai lentă în prim-plan, creând un efect 3D pe măsură ce derulați. Folosit cu ușurință, poate oferi un element de adâncime frumos, subtil, care are ca rezultat un site distinctiv și memorabil.

Pentru a arăta cum ar trebui să se facă, iată câteva site-uri care folosesc tehnica cu efect strălucitor. În unele cazuri, defilarea în paralaxă este vedeta spectacolului; în altele, pur și simplu adaugă o notă de adâncime, ceea ce face ca prim-planul să pară puțin.

Dacă vă place să împingeți barca, aceste impresionante exemple de animație CSS prezintă un alt mod excelent de a vă face site-ul să stea în picioare afară din mulțime. Și puteți consulta, de asemenea, cele mai bune instrumente de proiectare web care vă vor ajuta în proiectarea dvs. Deocamdată, totuși, să aruncăm o privire asupra unor site-uri folosind defilarea în paralelă în mod corect.

Istoria artei designului web

Istoria artei și designul web nu sunt subiecte pe care le-ați pune în mod necesar împreună, dar sunt frumos uniți în acest site de istorie a artei de design web, care urmărește viitorul designului web, uitându-se la artă în timp.

Aici există o serie de tehnici de defilare în paralaxă, ceea ce înseamnă că utilizatorii sunt surprinși și încântați în mod constant în timp ce derulează pagina în jos. Aceasta merită să petreceți puțin timp explorând.

Catalogul interactiv Qode

Catalogul interactiv Qode are un sistem de navigare stilizat pentru textul inferior o imagine pentru fiecare articol. Dând clic pe catalog, apare defilarea orizontală a paralaxei folosită pentru a prezenta o serie de teme WordPress. Nu este cea mai inovatoare utilizare a defilării în paralelă din această listă, dar își servește bine scopul. O stropire de animație este, de asemenea, folosită cu un efect bun.

Canals

Conceput de Marcus Brown și dezvoltat de Aristide Benoist, Canals te duce într-o călătorie de 400 de ani prin istoria canalelor din secolul al XVII-lea din Amsterdam. Site-ul este conceput pentru a oferi o experiență în stil editorial. , cum ar fi răsfoirea unui volum luxos de masă de cafea, și folosește foarte mult paralaxa pentru a vă atrage atenția asupra noilor secțiuni ale poveștii sale și pentru a oferi site-ului un efect de adâncime subtil.

Povestea The Goonies

Oricine de o anumită vârstă are iubire garantată „anii 80 ro aventură, The Goonies, iar dacă ești tu, atunci acest site îți va bate cu siguranță glandele nostalgiei. Creat de Joseph Berry folosind WebFlow, The Story of The Goonies este un tribut adus unui clasic retro care folosește defilarea în paralaxă pentru a vă atrage în poveste, pentru a vă prezenta personajele și a dezvălui modul despre film.

Dogstudio

Atracția focală imediată a site-ului Dogstudio este un frumos câine animat 3D – sau este un lup? – în centrul paginii, care se scalează și se rotește în timp ce derulați coborâți în jos pe pagina de paralaxă. Iluminarea acestuia își schimbă culoarea pe măsură ce treceți cu mouse-ul peste titlurile proiectelor recente ale lui Dogstudio și, probabil, bitul nostru preferat este atunci când se învârte în fața copiei paginii, ascunzând o parte din text.

ToyFight

ToyFight este o agenție creativă premiată și site-ul său este foarte distractiv. Fondatorii Jonny Lander și Leigh Whipday s-au transformat în figuri 3D, care apar într-o serie de scene de-a lungul site-ului (inclusiv această obraznică referință Walsh & Walsh). Utilizarea inteligentă a paralaxei amplifică efectul 3D și asociată cu fundaluri îndrăznețe, luminoase și simple, nu devine niciodată copleșitoare sau iritantă.

Diesel: BAD Guide

84.Parisul a creat acest impresionant site de paralaxă (și campania de socializare asociată) pentru a însoți lansarea parfumului BAD Diesel. Site-ul de o pagină prezintă seria de reguli care alcătuiesc „Ghidul BAD”.

Utilizatorul poate explora trăgând mouse-ul în jurul paginii de paralaxă, care este așezată ca un panou de imagini pentru a face clic. Există sfaturi despre orice, de la Tinder („Glisați spre dreapta, dreapta, dreapta, dreapta – le veți sorta mai târziu „) la Instagram (” Nu uitați să luați legătura cu un fost joi #TBT „), însoțit de ilustrații monocrome.

Firewatch

Unul dintre Cele mai frumoase exemple de defilare în paralaxă pe care le-am văzut este acest site web pentru jocul Firewatch, care folosește șase straturi mobile pentru a crea un sentiment de adâncime. Este minunat, deoarece nu există deturnări de scroll (ceva care însoțește adesea efectul de paralaxă) și este utilizat doar în partea de sus a paginii – restul site-ului este în continuare, astfel încât să puteți citi informațiile fără a vă îmbolnăvi de mare. Dacă doriți să vedeți cum se face, iată o demonstrație frumoasă pe CodePen.

GitHub 404

Pagina 404 a GitHub nu este o defilare strict de paralaxă, deoarece efectul se întâmplă la mișcarea mouse-ului spre deosebire de derulare, dar este o pagină foarte distractivă care folosește straturile pentru a adăuga adâncime. Spre deosebire de paralaxa „adecvată”, fundalul se mișcă mai repede decât primul plan, creând o senzație dezorientantă, în altă lume.

Jess & Russ

Nu este o surpriză faptul că site-ul de nuntă al cuplului de design Russ Maschmeyer și Jessica Hische este o frumusețe de privit. Site-ul prezintă povestea lor romantică, cu defilare în paralaxă folosită peste tot pentru a adăuga profunzime ilustrațiilor. S-au căsătorit în 2012, dar site-ul merită încă o privire.

Make Your Money Matter

Finanțele și banii sunt cu greu cele mai interesante dintre subiecte. Dar agenția digitală Firstborn din New York este în discuție cu acest site dinamic cu defilare în paralaxă Make Your Money Matter for the Public Service Credit Union.

Cu scopul de a învăța publicul beneficiile aderării la o uniune de credit, mai degrabă decât să utilizeze o bancă, acest site strălucit include de la modul în care funcționează o uniune de credit, până unde să o găsiți și cum să aplicați, precum și un calculator care arată cât de mult profitează băncile din depozitele clienților.

Madwell

Agenția de proiectare și dezvoltare Madwell, cu sediul în New York, își prezintă portofoliul cu o gamă de efecte de defilare paralaxă pentru a crea un stil 3D vizibil care adaugă un cantitatea de adâncime.

New York Times: Tomato Can Blues

În epoca actuală a atenției scăzute și a mediilor de dimensiuni mici, cum atrageți oamenii către jurnalismul de lungă durată? Tomato Can Blues este un răspuns excelent la această problemă din New York Times, combinând câteva tehnici de design web inteligente cu povestiri și ilustrații inspirate de benzi desenate create de Atilla Futaki.

Unul dintre cele mai bune exemple de paralax scrolling noi „Am văzut, articolul vă duce prin povestea unui luptător în cuști scris de Mary Pilon. Pe măsură ce parcurgeți conținutul, ilustrațiile prind viață cu animații și modificări inteligente, permițându-vă să vă scufundați complet în conținut.

Ilustrațiile lui Futaki s-au bazat pe dosarele poliției, pe relatările martorilor, pe fotografii și pe notele reporterului, iar atenția asupra detaliilor strălucește. Una peste alta, este o experiență minunată de lectură – acesta este viitorul jurnalismului online ?

Snow Fall

Unul dintre primele site-uri care au depășește cu adevărat limitele a ceea ce ai putea face cu conținutul editorial online de lungă durată, articolul din New York Times „Snow Fall combină o serie de elemente diferite, inclusiv defilare în paralaxă și videoclipuri web.

Articolul, despre groaza unei avalanșe de la Tunnel Creek, a fost publicat online în decembrie 2012, dar se menține în continuare puternic ca exemplu de ceea ce puteți face cu defilarea în paralaxă. Ziarul a prezentat articolul câștigător al lui Pulitzer într-un mod inovator care a atras atenția comunității de design la nivel mondial.

• tutoriale de proiectare web
• cele mai bune hard disk-uri externe
• Pagini de eroare 404 proiectate strălucit