Aceasta postare a fost actualizata ultima data pe 3 iunie 2020.

Inapoi la debutul sau online in 2011, efectul de defilare in paralaxa a facut valuri ca o noua tendinta interesanta de design web. Multe moduri de internet au aparut si au disparut in anii de atunci, dar defilarea in paralaxa s-a impus ca un element fundamental de proiectare care este aici pentru a ramane.

Cand creati un site web, derularea in paralaxa este o modalitate excelenta de a adauga profunzime si miscare experientei de navigare. Mai jos veti gasi o explicatie completa a defilarii in paralela, completata cu o selectie de exemple inspiratoare de site-uri web de la care puteti invata si cateva sabloane de site-uri web pentru a incepe:

Ce este derularea paralaxei?

Defilarea Parallax este o tehnica de proiectare web in care fundalul site-ului web se misca intr-un ritm mai lent decat primul plan. Acest lucru are ca rezultat un efect 3D pe masura ce vizitatorii deruleaza pe site, adaugand un sentiment de profunzime si creand o experienta de navigare mai captivanta.

Parallax se bazeaza pe iluzia optica.

Array

Intrucat ochiul uman percepe obiecte care sunt aproape de noi ca fiind mai mari decat lucrurile mai indepartate, percepem obiectele indepartate ca si cum s-ar misca mai incet.

Iluzia a fost adoptata de mult timp in paralaxa intre diferite medii, favorizand un efect realist. Prima sa utilizare a fost in animatia traditionala, datand inca din Alba ca Zapada Disney si cei sapte pitici si in jocurile video precum Super Mario .

Odata cu progresele in CSS si HTML, efectele de paralaxa au evoluat ulterior in lumea designului web asa cum o cunoastem astazi.

Iata noua exemple remarcabile de defilare in paralaxa construite cu Wix, selectate manual pentru inspiratia dvs. de design web:

Exemple de defilare in paralela

01. Design usor

Emilie De Grosbois, o artista vizuala din Montreal si fondatorul Mild Design, ne poate arata un lucru sau doua despre cum sa realizam un portofoliu.

Array

Site-ul propriu al portofoliului ii surprinde pe vizitatori cu o primire impresionanta: o serie de imagini complexe pe ecran complet afisate intr-un lung scroll. Acestea sunt unele dintre cele mai bune imagini ale site-ului web pe care le-am vazut.

Prin utilizarea paralaxei, tranzitia de la o imagine la urmatoarea devine nu numai mai lina, ci adauga si un sentiment de profunzime, ca si cum imaginile aluneca usor una peste alta.

02. Nolan Omura

Nolan Omura este un fotograf si videograf din Hawaii, specializat in fotografie subacvatica. Preluarea sa ingenioasa asupra efectului de derulare a paralelei adauga profunzime si miscare designului sau deja captivant al paginii de pornire.

Prin impartirea paginii in benzi cu latime completa, vizitatorii site-ului sunt intampinati cu fotografii exaltante ale vietii acvatice de fiecare data cand deruleaza mai jos.

Array

Fasiile plutesc usor una peste cealalta, folosind o combinatie de ambele paralaje si dezvaluie efecte de derulare.

Oferirea fotografiilor si mai multa miscare sunt animatii minuscule. Desi acestea sunt abia vizibile, animatiile site-ului web – combinate cu utilizarea paralaxei si a videoclipului – fac ca aceasta pagina sa prinda viata pe deplin.

03. Chris Covert

Site-ul indraznet al inginerului aerospatial Chris Covert este la fel de profesionist pe cat de inovator. Proiectarea si interactivitatea site-ului reusesc sa injecteze o mare parte din personalitatea lui Chris in ceea ce altfel ar fi putut fi o lista uscata de abilitati, experienta si istorie a educatiei.

Chris plaseaza imagini ale CV-ului si cartii de vizita tiparite in centrul ecranului. Folosind efectul de derulare a dezvaluirii, imaginile de fundal ale site-ului web se schimba rapid in spatele lor, pe masura ce imaginile raman asezate, obtinand un rezultat surprinzator.

Acordand o atentie deosebita pana la cele mai mici detalii, site-ul web ofera un raspuns remarcabil la intrebarea cum sa scrieti un CV. De asemenea, include un document PDF descarcabil al CV-ului pentru ca potentialii angajatori sa poata fi imprimati.

04. Ivy Chen

Utilizarea de paralaxa a designerului si ilustratorului Ivy Chen face un site de portofoliu unic, in care lucrarile sale se dezvaluie treptat, ca si cum ar derula magia.

Utilizarea de catre Ivy a efectului de defilare in paralaxa nu este doar fascinanta, ci si amplifica si explica continutul paginii. Ca designer multidisciplinar, ea opereaza la intersectia dintre ilustratie si design grafic. Cele doua domenii sunt integrate perfect, iar ilustratiile ei de moda se transforma incet in articole de imbracaminte din viata reala pe masura ce derulam.

05. Bijuterii industriale

Site-ul web al designerului de bijuterii Hila Rawet Karni foloseste defilare in paralaxa pentru a crea o experienta de navigare interesanta, cu mai multe fatete. Stratificand imagini si text unele peste altele si facandu-le sa se deplaseze la viteze diferite, pagina pare sa se schimbe constant si sa formeze noi compozitii pe masura ce derulam. Aspectul stratificat ajuta, de asemenea, acest site de afaceri mici sa tina pasul cu cele mai noi tendinte de design web.

Observati, de exemplu, modul in care fotografia de mijloc a unei femei asezate ramane pe loc, pe masura ce alte elemente se deplaseaza langa ea. Fotografia respectiva se scoate in cele din urma si de pe ecran, facand loc pentru alte sectiuni ale acestui site web si obtinand o senzatie dinamica.

06. Barco Sorriso

Ilustratiile digitale si o paleta de culori vii confera un ton vesel si primitor acestui site web nonprofit. In partea superioara este reprezentata o barca in ocean, potrivita pentru o organizatie al carei nume inseamna „Barca numita Zambet” in portugheza.

Cu toate ca derulam in jos pe acest site web multilingv, totusi, vederea oceanului din prima cutie este ascunsa treptat in spatele verdeatei celei de-a doua. Aceasta tranzitie eleganta, realizata prin utilizarea defilarii in paralela, ne aduce in minte straturile si profunzimea filmelor de animatie sau a jocurilor video.

07. Karlie Kloss

Acest site elegant si curat este portofoliul de modelare perfect pentru supermodelul Karlie Kloss. Schema de culori a site-ului isi propune simplitatea in alegerile sale de alb, gri si negru, la fel si cantitatile generoase de spatiu alb.

In acelasi timp, acest aspect clasic este combinat cu mici atingeri care mentin site-ul web departe de obisnuit: utilizarea subtila a rozului, fontul negru greu si simtul miscarii oferite de defilarea in paralela si utilizarea videoclipului.

08. Hana Knizova

Site-ul de fotografie al Londrei, Hana Knizova, prezinta o lunga defilare a imaginilor dezvaluite si ascunse folosind defilarea in paralaxa.

Fotografiile de pe pagina de pornire sunt o introducere a proiectelor variate ale Hanei si a numeroaselor specialitati ca fotograf, de la editorial la portret, pana la fotografii de maternitate.

In acelasi timp, imaginile se dubleaza si ca meniul site-ului web, creand un sistem de navigare unic in care fiecare imagine duce la o pagina interioara diferita.

09. Frankie Ratford

Site-ul personal al designerului grafic, nomad digital si antreprenor Frankie Ratford este colorat, vibrant si plin de atmosfera.

Pliata superioara de culoare insorita are mai multe straturi de paralaxa. In timp ce Frankie insasi ramane statica intr-un portret sincer si relatabil, numele ei aluneca in sus din spatele fotografiei, urmat de o sectiune bio care aluneca deasupra aceleiasi imagini.

Restul acestui site de design grafic foloseste utilizari mai subtile ale defilarii in paralaxa in afisarea diferitelor detalii informative.

Activarea defilarii in paralela pe site-ul dvs. Wix

Pentru a activa derularea in paralela pe site-ul dvs. web Wix, utilizati benzi care au o culoare, o imagine sau un fundal video. Combinarea mai multor benzi poate imbogati efectul.

Cum se activeaza derularea de paralaxa pe o banda:

1. In Editor, faceti clic pe „Adaugati” din meniul din stanga, apoi alegeti „Decupati”.

2. Faceti clic pe „Schimbati fundalul benzii”. Aici puteti schimba fundalul intr-o culoare, imagine sau videoclip la alegere.

3. Faceti clic pe „Setari” pe fundalul benzii si, sub „Efecte derulare”, alegeti efectul dorit (Parallax, Reveal, Zoom-In sau Fade-In).

4. Verificati efectul in actiune in modul Previzualizare si revizuiti daca este necesar.

Cum sa setati imaginea de fundal la defilare in paralela:

1. In Editor, faceti clic pe „Schimbati fundalul paginii”.

2. Faceti clic pe „Setari” pe imaginea de fundal.

3. Sub „Efecte derulare”, selectati „Parallax”.

Sabloane de site-uri web cu defilare in paralela

Pentru a incepe cu usurinta, alegeti unul dintre numeroasele noastre sabloane de site-uri web care sunt proiectate cu defilare in paralaxa incorporata, apoi personalizati-le in functie de nevoile dvs.

Am selectat trei astfel de sabloane pentru a va ajuta sa creati un site web:

Magazin online de ingrijire personala : acest sablon pentru un site de comert electronic prezinta produsele sale pe fundaluri curate si solide. In acelasi timp, derularea in paralaxa se aplica fotografiilor persoanelor care interactioneaza cu produsele, distingandu-le si oferind o experienta mai interactiva.

Magazinul de paine : acest sablon atragator este alcatuit din mai multe benzi cu ecran complet cu defilare in paralela. Un cinematograf pe a treia banda adauga un sentiment suplimentar de miscare.

Sa ne jucam : acest sablon de paralaxa cu mai multe straturi obtine un aspect sofisticat cu un fundal de gradient care schimba culoarea si un strat static de tipografie. Pentru informatii suplimentare, consultati acest tutorial detaliat al sablonului.

De Eden Spivak

Expert in design si scriitor

ARTICOLE SIMILAREDE LA ACELAȘI AUTOR