27 de site-uri web unice cu efect paralax de mișcare
Inspiră-te din aceste 27 de exemple cu efect de paralax și învață cum să aduci profunzime și acțiune paginilor tale web.
Ecranele digitale pot fi un spațiu bidimensional. Designerii web au găsit tehnici pentru a modifica pixelii lor plați pentru a oferi un sentiment de profunzime și dimensionalitate. Aici pot intra în joc și efectele subtile de paralax.
Efectele de mișcare Parallax adaugă acțiune și iluzia de profunzime. Acestea iau diferite elemente vizuale și le mișcă la viteze diferite într-un design de site web. Unele se pot mișca mai repede, altele se pot mișca mai încet, în timp ce unele pot sta pe loc.
Paralax-ul este o tehnică de design care poate fi folosită pentru a adăuga o varietate de aspecte. Dar poate fi folosit și pentru aplicații practice sau pentru evidențierea a ceva important. În această postare, vom trece peste câteva exemple care vă vor ajuta să vă inspirați. În plus, vă vom arăta cum să utilizați aceste concepte pentru a crea ceva frumos pentru web.
Cu toate acestea, rețineți că aplicarea desă a efectului paralax poate provoca rău celor cu tulburări vestibulare. Iluzia de mișcare și adâncime poate provoca amețeli sau dezorientare. Dacă folosiți aceste site-uri web ca inspirație pentru propria dumneavoastră afacere, nu uitați să urmați câteva dintre aceste indicații, pentru a avea un design accesibil cu efect de paralax:
- Păstrați numărul de efecte de paralax la minimum
- Constrânge efectele de mișcare într-o zonă mică a ecranului
- Includeți opțiuni pentru utilizatori pentru a dezactiva efectele de paralax
- Nu lăsați efectele dumneavoastră să distragă atenția utilizatorilor de la informațiile importante
27 de exemple de site-uri web cu efect de mișcare paralax
Am colectat 27 de exemple de site-uri web cu efecte de mișcare paralax care vă pot inspira să utilizați această tendință de design web în propria muncă.
- Louie Sellers
Unul dintre multele talente ale lui Louie Sellers, ca designer UX cu gândire creativă, este ochiul său format pentru interacțiuni. Aici, în portofoliul său online, el prezintă o serie de imagini cool, care captează atenția.
Există efecte de paralax pentru fiecare proiect prezentat. Trecerea cu mouse-ul peste un proiect completează conturul cu detalii și schimbă imaginea, oferind un sentiment de tridimensionalitate. Când imaginile din prim-plan se mișcă pe o culoare de fundal solidă, acestea le fac mai proeminente decât atunci când sunt lăsate statice.
- Alex Dram
Când intri pe pagina de pornire a portofoliului UX/UI a lui Alex Dram, ești întâmpinat cu o gamă minimalistă de triunghiuri violet și câteva cuvinte despre cine este Alex ca designer. Dar cu doar o mică mișcare în jos pe ecran, aceste forme trag într-o configurație asemănătoare săgeții, îndreptându-se direct în peisajul asemănător planetar care se desfășoară înaintea lui. Folosirea de către Alex a mișcării cu efect de paralax, introduce pe cineva de-a lungul unei călătorii, care reprezintă galaxia operei sale.
Această delectare tridimensională are loc prin intermediul efectului de paralax. În același timp, vizualul se mișcă la viteze diferite. Ne place să vedem efectul de paralax folosit în scopuri artistice, iar acest aspect oferă acestui site o atmosferă spațială unică.
- Web design & art history
Microsite-ul de web design și istoria artei vă ghidează prin modul în care arta a evoluat și se leagă de designul web modern. Este o experiență vizuală superbă, plină de grafică strălucitoare — tipografie inspirată și efecte de paralax inventive. Aceasta nu este doar o explorare aprofundată a artei și a designului web, ci și o enciclopedie a animațiilor declanșate de scroll. De la text cu mișcare simplă la imagini cu efect suprareal, aceast aspect prezintă multe exemple grozave cu efect de paralax.
- The Goonies
Acest minunat omagiu adus The Goonies, acel film adorabil din anii ‘80, se deschide cu un efect de paralax uluitor care te atrage în acea coastă stâncoasă familiară din Oregon, unde are loc filmul. Acest exemplu de paralax nu implică prea multă complexitate. Aplicând viteze diferite imaginilor din prim-plan și de fundal și mărindu-le puțin, acest efect 3D vă prinde de mână și vă conduce direct în acest design web.
- OK Alpha
Acest ansamblu eclectic de culoare și text se adaugă efectelor de paralax care iau ceea ce ar fi putut fi un efect de mișcare lung și plat și îl transformă într-o experiență dinamică, cu mișcare și profunzime.
- Dockyard Social
Este ușor pentru restaurante să nu vrea să depună mult efort pe site-urile lor. Ceea ce este pe farfuria unui client este mult mai important decât ceea ce este pe ecranul unui computer. Dar Dockyard Social, un furnizor scoțian de mâncăruri și băuturi, depășește cu mult minimul strict, regăsit pe atât de multe site-uri de restaurante. Alături de o schemă de culori convingătoare, efectele de paralax se adaugă la atmosfera personală, dar ciudată a site-ului lor.
- OnCorps AI
Acest design web care a fost creat pentru compania de analiză a datelor OnCorps, începe cu o diversitate de puncte împrăștiate, care se unesc într-o curbă clopot, reprezentând atât de bine ceea ce fac ei cu datele. Derularea în jos dezvăluie un aspect plin de forme plutitoare, animații și efecte de paralax.
- Jomor Design
Cu un aspect inteligent, microinteracțiuni unice și multă inteligență, acest portofoliu de la Jomor Design arată că este posibil să găsim echilibrul potrivit între design și personalitate.
De la textul care se schimbă ușor, până la numeroasele efecte de paralax care ating componentele sale vizuale, totul se reunește pentru o experiență de utilizator fără efort. Jo introduce, de asemenea, cantitatea potrivită de umor împreună cu munca sa de design. El se descrie astfel: „78% dintre clienții mei spun că sunt un geniu. Ceilalți 22% spun că sunt un geniu sexy.” Acest lucru, împreună cu o serie de alte replici amuzante, fac ca acesta să fie mai mult decât un portofoliu al lucrării sale, ci mai degrabă o reprezentare a cine este el.
- Parallax Template
Parallax Template de Jerome Bergamaschi este o explozie de culoare chiar de la început.
Acest șablon include o scenă viu colorată – câmpuri verzi, laturi de stânci magenta și nori portocalii și roz – cu mișcare subtilă. Iarba întunecată din partea de jos a scenei pare să se miște în sus, schimbând fundalul în negru. Este un exemplu grozav de mișcare fluidă a efectului de paralax făcut bine.
- Timeslot
Timeslot are un unghi interesant prin platforma sa de socializare. Ei doresc ca oamenii să-și împărtășească calendarele despre ceea ce fac și să se conecteze cu prietenii lor pentru a-și face planuri de viitor. Ei se concentrează asupra modului în care tehnologia poate reuni oamenii în schimbul de experiențe, în loc să stea pasiv.
Timeslot folosește efectul de paralax orizontal pentru a spune povestea despre cum funcționează aplicația lor pentru utilizatori. În partea de sus a paginii vedem un teanc stratificat de fotografii ale oamenilor. Pe măsură ce derulați în jos, acești indivizi sunt atrași împreună și aduși pe ecranul unui smartphone. Această imagine puternică reprezintă o metaforă fantastică a ceea ce își propune aplicația lor pentru a conecta oamenii.
- Weglot
Weglot permite designerilor să creeze site-uri multilingve fără a fi nevoie să cunoască o altă limbă. Acest lucru vă oferă oportunitatea de a sparge bariera lingvistică și de a proiecta pentru clienții din întreaga lume.
Site-ul web al lui Weglot se deschide cu un glob care se află în mișcare. O mișcare în jos aduce aceste părți împreună. Acest simbolism al modului în care software-ul lor poate aduce clienți străini, care altfel nu ar fi fost la îndemână, surprinde esența a ceea ce face software-ul.
Efectele de paralax pot funcționa pentru schimbări subtile într-un design sau în cazul în care doriți să aveți un impact mai mare, cum face Weglot în această animație mondială deconectată.
- STEEZY Studio
STEEZY Studio dorește ca tu să faci exerciții zilnice prin exercitarea unor mișcări. Oferă cursuri video pentru dans, care sunt mai mult decât o simplă redare a unui videoclip. Vă permit să alegeți diferite unghiuri, mișcări în buclă și opțiuni pentru a studia dansurile în profunzime.
Există câteva efecte de paralax utilizate pe tot parcursul designului, dar cel mai atrăgător este acest efect în stil acordeon de mai jos. Ei organizează orele unui anumit curs de dans pe un plan înclinat. Nu numai că este mai interesant decât o grilă orizontală de capturi de ecran, dar economisește și spațiu.
- Neueform
Neueform este spațiul web al muzicii electronice lo-fi, hipnotice, inspirate de R&B a lui Andres Jasso. Nu numai că are abilități de producător, dar este și designer – și se vede. El a creat un design de site web cu muzică alb-negru minimal, aproape brutalist, pentru a-și prezenta melodiile. Există un efect de paralax atrăgătoar în partea de sus, care atinge o rețea cilindrică. Este un efect mic, dar face ca această formă să sară de pe ecran. Acesta este un alt exemplu conform căruia efectele de paralax nu trebuie exagerate, dar chiar și mișcările mici pot adăuga atât de mult unui design.
- Avenir Creative
Avenir Creative adoptă o abordare mai unghiulară. Alături de această geometrie înclinată sunt și o serie de efecte de paralax care se adaugă la senzația excentrică și unică a site-ului acestei agenții.
- Terusama
Terusama, o platformă de management al lanțului de aprovizionare, folosește un efect de paralax în prim-planul smartphone-urilor și a capturilor de ecran care ocupă partea dreaptă a designului lor. Este un efect care poate nici măcar nu fuzionează cu non-designeri, dar cu siguranță l-am observat. Variind viteza acestor imagini, se creează o pauză plăcută în congruență.
- Downtown Bentonville
Vei petrece ceva timp în Bentonville, Arkansas? Dacă nu, ar trebui. Această pagină arată că se întâmplă o mulțime de lucruri minunate acolo.
Există o mulțime de conținut aici, dar și câteva efecte declanșate de mișcare pentru a amesteca lucrurile – inclusiv paralax, care creează o experiență ușoară pentru utilizator.
- UDX Bike
UDX Bike oferă biciclete electrice BMX, care par că ei pot face unele acțiuni serioase.
Fotografia de produs surprinde detaliile și frumusețea robustă a acestor biciclete, fiecare fiind înclinată pe un fundal monocromatic. Acest lucru ar fi fost suficient pentru ca aceste biciclete BMX să iasă în evidență, dar un efect de paralax le împinge mai departe, cerându-ți să ții cont de acestea.
- Plink Rebuild
Site-ul a fost realizat în scop educațional și chiar a făcut proiectul clonabil pentru oricine dorește să îl experimenteze. Pe lângă efectele de mișcare a paralax-ului, veți vedea și ilustrații și animații 3D și un cursor personalizat.
- Agency In The Wild
Agency In The Wild combină textul supradimensionat și animațiile declanșate de o mișcare elegantă pentru un site web al unei agenții stelare. Există o mișcare de paralax declanșată de un utilizator nou sub forma unui simbol de adăugare care se schimbă, combinat cu o listă cu cine a lucrat. Unele dintre cele mai bune efecte nu servesc niciunui scop practic, dar fac desenele să iasă în evidență.
- Superlab
Cu forme geometrice strălucitoare, animații captivante și o estetică optimistă, site-ul web al agenției Superlab nu duce lipsă de fler creativ. Efectul de paralax este aplicat fiecărui proiect prezentat, dându-le fiecăruia un mic impuls – creând contrast cu elementele statice din design.
- Custom Web
Fiecare secțiune a acestui site are un efect animat, care animă spațiul cu mișcare. Există o mișcare de paralax de-a lungul întregului site, oferindu-i profunzime și dimensionalitate, care sunt atât de necesare.
- Vectary
Vectary oferă o platformă pentru crearea de imagini AR și 3D. Totul, de la personaje de desene animate la reprezentări fotorealiste de produse, este posibil cu software-ul lor. Există o mulțime de grafică în stil 3D care ocupă acest aspect.
- Creative South
Creative South, o conferință de design din Columbus, Georgia, organizează un eveniment cu o listă impresionantă de vorbitori și ateliere pentru creatori. Acest site web, cu ilustrațiile sale ciudate și texturile organice, surprinde spiritul conferinței lor. Derulând, există o serie de efecte de paralax, mișcând elementele peisajului colorat care alcătuiesc acest design.
- Digital Bake
Acest site inventiv, plin de efecte de paralax îți oferă un alt motiv pentru a te îndrepta și a vedea tot ce are de oferit.
Cu o gamă grozavă de forme și spațiu pentru propriul conținut, îl poți clona. Puteți chiar să schimbați culorile și să le personalizați după cum doriți pentru propriile dumneavoastră modele.
- IX2
Efectele de paralax fac parte din Interactions 2.0. Aceasta este o progresie naturală a designului web, în care acțiunile utilizatorului ghidează calea prin derulare și micro-interacțiuni. Acest ghid analizează cât de departe au ajuns interacțiunile astăzi, folosind o serie de efecte interesante de paralax.
- Parallax
Bine – este chiar în nume. Dar acest exemplu este un exemplu de manual. Cu straturi schimbătoare de stele și munți încețoși, acest lucru vă oferă o lecție simplă despre cum să puneți împreună ceva similar.
- Dutchman’s Gold
Aceasta preia tema Lost Dutchman, redată în straturi de elemente vizuale pe 8 biți. Ne place simțul ciudat al experimentării, iar acesta este un alt design pe care îl puteți clona și reorganiza modul în care a fost alcătuit.
Începeți cu propriile modele de efecte cu paralax
Cu siguranță am acoperit multe stiluri diferite de efecte paralax în acest articol.Pe lângă acestea mai exista o mulțime de efecte posibile pe care le găsiți cu ușurință atunci când căutați pe internet. Atunci când doriți să folosiți acest efect este indicat să țineți cont și de trendurile actuale în web design.
