Paralaxa este Efectul de paralaxă: exemple

Cuprins:

Paralaxa este Efectul de paralaxă: exemple
Paralaxa este Efectul de paralaxă: exemple
Anonim

În mișcare, paralaxa înseamnă o schimbare a locației unui obiect pe un fundal în raport cu un observator care se află pe loc. Acest termen a câștigat popularitate pe internet. În special, site-ul arată interesant, în designul căruia există elemente dinamice. Parallax este o tehnică de proiectare a paginilor web folosită de webmasteri pentru a atrage un număr mare de vizitatori.

Cum este paralaxa

Defilarea Parallax poate fi folosită atât pe verticală, cât și pe linie dreaptă. Nintendo este cel mai bun exemplu. Mulți dintre noi ne amintim cu nostalgie de jocurile pe calculator, reprezentate de mișcarea personajelor principale din partea stângă a ecranului spre dreapta. De asemenea, este posibilă deplasarea în jos, efectuată de-a lungul unei linii drepte situate vertical. Efectul de paralaxă pe web este adesea folosit. Puteți folosi JavaScript sau CSS pentru a crea un glisor vertical 3.

Efectul spațial tridimensional descris este doar caracteristic acestora. Creatorii jocurilor au folosit mai multe straturi de fundal. Ele diferă ca textură, în timp ce mișcarea se realizează cu diferiteviteza.

Nu credeți că paralaxa este doar un efect 3D. Pe pagină, puteți muta pictogramele existente. În plus, arată destul de atractiv. O opțiune deosebit de bună este să folosiți o traiectorie individuală pentru fiecare dintre ele. În acest caz, sunt utilizate diferite pictograme, care se deplasează de-a lungul diferitelor traiectorii. Acest design atrage atenția.

paralaxa este
paralaxa este

Imaginea prinde viață

Este greu să găsești un site fără imagini. Desenele de în altă calitate și demonstrative atrag vizitatorii. Dar cea mai mare atenție este atrasă asupra diferitelor tipuri de imagini dinamice. Într-adevăr, dacă există mișcare atunci când vizitați un site, atunci acest lucru atrage atenția. Crește semnificativ probabilitatea ca un vizitator să revină la o resursă la o imagine dinamică. Părea să se miște sau nu? Prin urmare, pentru a atrage vizitatori pe site, merită să studiezi un lucru precum efectul de paralaxă.

Exemple de site cu imagini în mișcare:

  • hvorostovsky.com;
  • www.kagisointeractive.com.

După cum se arată în exemple, experiența este îmbunătățită prin meniuri derulante în sub-articole. Un astfel de element economisește timp pentru vizitatori, prin urmare este atractiv pentru aceștia.

jBibliotecă Query

Termenul jQueryParallax definește biblioteca cu același nume. Datorită acesteia, este ușor de realizat efectul de mișcare în format 3D. În biblioteca jQuery, percepția 3D este creată într-o varietate de moduri. Una dintre ele constă în mișcarea orizontală simultană a obiectelor de fundal cuviteză diferită. Această bibliotecă se caracterizează prin prezența unui număr mare de diferite tipuri de proprietăți. Iar deplasarea descrisă aici este doar o mică parte din capacitățile sale.

Site-ul arată destul de atractiv, pentru realizarea căruia s-au folosit diverse elemente moderne. Una dintre ele este paralaxa. Exemple de site-uri ar putea arăta astfel:

  • www.grabandgo.pt;
  • www.fishy.com.br;
  • www.noleath.com;
  • buysellwebsite.com.

jParallax este reprezentat de straturi care se mișcă cu mouse-ul. Elementele dinamice se caracterizează prin poziționare absolută (poziție:absolut;). Fiecare dintre ele se caracterizează prin propria dimensiune și mișcare la o viteză individuală. Poate fi text sau o imagine (la cererea creatorilor resursei).

defilare paralaxă
defilare paralaxă

Percepția vizitatorului site-ului

După aceea, o persoană acordă de obicei atenție faptului că pagina este proiectată cu o calitate în altă, convenabilă și informată. Acest fapt este de obicei respectat. Se întâmplă să apară curiozitatea de a încerca alte elemente. Există un număr mare de site-uri identice pe Internet. Cum să vă faceți resursa specială?

Dacă vă place designul, vizitatorul va rămâne o perioadă mai lungă. Astfel, probabilitatea ca el să fie atras de informațiile postate crește, va manifesta interes. Drept urmare, o persoană va folosi serviciul oferit, produsul sau oferta promoțională.

Jocuri vechi preferate

Conceptul de „paralaxă” ar trebui să fie familiar tuturorfanii consolelor din anii 80 și 90. Acest lucru este valabil pentru jocuri:

  1. Mario Bros.
  2. Mortal Kombat.
  3. Streets of Rage.
  4. Patrula Lunii.
  5. Testoase în timp.

Adică, paralaxa este o tehnică care a fost folosită pentru o perioadă destul de lungă. Aceste jocuri sunt într-adevăr amintite cu o oarecare nostalgie. La urma urmei, ei par să fie impregnați de caracterul acelei perioade.

Imaginile de pe ecran sunt create folosind o tehnică precum defilarea paralaxă. Nu este nimic surprinzător în faptul că această tehnică a câștigat o popularitate binemeritată. Acest concept de design este primit cu căldură de cei care au jucat în anii 80-90 sau au urmărit timpul liber al prietenilor.

cum se face paralaxa
cum se face paralaxa

Defilare Parallax

Agenții de marketing ai mărcilor de top din lume au folosit mult timp tot felul de progrese tehnice. Astfel, devine posibil să interesezi chiar și un vizitator ocazional al site-ului.

Defilarea Parallax a fost folosită cu destul de mult succes de Nike. Site-ul web original al companiei a fost proiectat de Weiden și Kennedy. Dar acest design nu a supraviețuit. Resursa a fost actualizată treptat, în conformitate cu tendințele vremii noastre. Activatedrinks.com este un exemplu de site al cărui design amintește de cel folosit de marketerii Nike din acea perioadă.

exemple de paralaxă
exemple de paralaxă

Difuzoarele nu ar trebui să fie prea multe

Nu uitați că designul site-ului este adesea criteriul cheie care ghidează vizitatorul. Prost executatresursa lasa de obicei utilizatorului impresia de frivolitate a companiei proprietare. Dar un site cu tot felul de elemente de design atractive indică dorința proprietarilor organizației de a interesa vizitatorii.

Aici merită să ne amintim despre paralaxă. Acesta este un instrument minunat. Dar nici măcar ei nu ar trebui să se lase prea duși de cap. Pentru că pagina, pe care există un număr mare de diferite tipuri de elemente în mișcare, este destul de greu de perceput. Cel mai bine este să faceți designul moderat elegant și ușor de înțeles.

Dynamic ar trebui să fie elemente individuale care necesită selecție. De asemenea, poate exista o imagine care este creată folosind straturi care se mișcă unul față de celăl alt. Nu uitați că site-ul utilizatorului este conceput în primul rând pentru vizitatori. Nu trebuie să fie o capodopera a unui webmaster care și-a pus toate cunoștințele în ea. La urma urmei, o astfel de abordare nu va face decât să complice percepția.

efect de paralaxă pentru site-ul web
efect de paralaxă pentru site-ul web

Cum se creează o navigare pe site

Cum se face paralaxa? Această întrebare este de interes pentru mulți creatori de site-uri web. Nu este necesar să cunoașteți complexitatea scrierii etichetelor. Este foarte convenabil să folosiți resurse speciale pe Internet. Din numărul mare de propuneri disponibile, se pot distinge următoarele ajutoare:

  1. Plax este un program destul de ușor de utilizat. Are tendința de a face pagina fluidă prin mișcarea mouse-ului.
  2. jQuery Parallax Image Slider - Un plugin jQuery folosit pentru a crea glisoare de imagine.
  3. Jquery Image Parallax - potrivit pentru proiectarea desenelor transparente. Prin utilizarea PNG-urilor, GIF-urile capătă profunzime, animate de mișcare.
  4. Curtain.js este folosit pentru a crea o pagină cu panouri fixe. În acest caz, se observă efectul deschiderii draperiilor.
  5. Scrolling Parallax: un plugin jQuery este de a crea un efect de paralaxă atunci când derulați rotița mouse-ului.
paralaxa ancorată la cursor
paralaxa ancorată la cursor

Câteva plugin-uri mai utile

După cum știți, informațiile sunt de cea mai mare valoare. Și cu cât se cunoaște un număr mai mare de modalități de a obține rezultatul dorit, cu atât este mai apropiată probabilitatea de a obține rezultatul corect. Pluginuri utile folosite pentru a crea dinamică:

  1. jQuery Scroll Path - folosit pentru a plasa obiecte pe calea specificată.
  2. Scrollorama este un plugin jQuery. Este folosit ca instrument pentru un design atractiv al materialului. Vă permite să „reviați” textul de pe pagină datorită derulării comode.
  3. Scrolldeck este un plugin jQuery. Este o soluție excelentă de prezentare pentru site-urile cu o singură pagină.
  4. jParallax reprezintă mișcarea straturilor în funcție de mișcarea indicatorului mouse-ului.
  5. Stellar.js este un plugin cu care orice element este proiectat cu adăugarea unui efect de defilare paralaxă.
exemple de efect de paralaxă
exemple de efect de paralaxă

Parallax ancorat la cursor

Această paralaxă pare destul de impresionantă. Imobil la prima vedereObiectele paginii site-ului se deplasează când cursorul mouse-ului se apropie. Se pare că prinde viață și urmează elementul mutat.

În primul rând, ar trebui să te oprești la imagine. Imaginea necesară este plasată într-un cadru, în timp ce marginile acesteia trebuie ascunse. Metoda este foarte simplă, iar desenul rezultat pare destul de atractiv.

Efectul de paralaxă pentru site este o modalitate minunată de a proiecta. Utilizarea acestuia indică faptul că s-a acordat atenția cuvenită creării resursei. Prin urmare, merită să acordați atenție serviciilor oferite sau informațiilor de citit. Astfel de site-uri par mai avantajoase pe fundalul unor resurse identice, dar concepute simplu.

Recomandat: