Paralaksa je Učinek paralakse: primeri

Kazalo:

Paralaksa je Učinek paralakse: primeri
Paralaksa je Učinek paralakse: primeri
Anonim

V gibanju paralaksa pomeni spremembo lokacije predmeta na nekem ozadju glede na opazovalca, ki je na mestu. Ta izraz je pridobil priljubljenost na internetu. Še posebej zanimivo izgleda spletno mesto, v oblikovanju katerega so dinamični elementi. Parallax je tehnika oblikovanja spletnih strani, ki jo uporabljajo spletni skrbniki za privabljanje velikega števila obiskovalcev.

Kaj je paralaksa

Pomikanje paralakse se lahko uporablja navpično in tudi v ravni črti. Nintendo je najboljši primer. Mnogi od nas se z nostalgijo spominjamo računalniških iger, ki jih predstavlja premikanje glavnih junakov z leve strani zaslona na desno. Možno je tudi premikanje navzdol, ki se izvaja vzdolž navpično nameščene ravne črte. Pogosto se uporablja učinek paralakse na spletu. Za ustvarjanje navpičnega drsnika lahko uporabite JavaScript ali CSS 3.

Opisani tridimenzionalni prostorski učinek je ravno zanje značilen. Ustvarjalci iger so uporabili več plasti ozadja. Razlikujejo se po teksturi, medtem ko se gibanje izvaja z različnimihitrost.

Ne mislite, da je paralaksa le 3D učinek. Na strani lahko premaknete obstoječe ikone. Poleg tega izgleda precej privlačno. Še posebej dobra možnost je uporaba posamezne poti za vsakega od njih. V tem primeru se uporabljajo različne ikone, ki se premikajo po različnih poteh. Ta dizajn pritegne pozornost.

paralaksa je
paralaksa je

Slika oživi

Težko je najti spletno mesto brez slik. Kakovostne in nazorne risbe privabljajo obiskovalce. Toda največ pozornosti pritegnejo različne vrste dinamičnih slik. Dejansko, če pride do gibanja ob obisku spletnega mesta, potem to pritegne pozornost. Bistveno poveča verjetnost, da se obiskovalec vrne na vir z dinamično sliko. Se je zdelo, da se premakne ali ne? Zato je za privabljanje obiskovalcev na spletno mesto vredno preučiti tako stvar, kot je učinek paralakse.

Primeri spletnega mesta za premikanje slik:

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

Kot je prikazano v primerih, se izkušnja izboljša s spustnimi meniji v podpostavke. Takšen element obiskovalcem prihrani čas, zato je zanje privlačen.

knjižnica jQuery

Izraz jQueryParallax definira knjižnico z istim imenom. Zahvaljujoč temu je enostavno doseči učinek gibanja v 3D formatu. V knjižnici jQuery se zaznavanje 3D ustvarja na različne načine. Eden od njih je vodoravno hkratno premikanje predmetov ozadja zdrugačna hitrost. Za to knjižnico je značilna prisotnost velikega števila različnih vrst lastnosti. In tukaj opisan premik je le majhen del njegovih zmogljivosti.

Stran je videti precej privlačna, za ustvarjanje katere so bili uporabljeni različni sodobni elementi. Ena izmed njih je paralaksa. Primeri spletnih mest bi lahko izgledali takole:

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

jParalakso predstavljajo plasti, ki se premikajo z miško. Za dinamične elemente je značilno absolutno pozicioniranje (položaj:absolutno;). Za vsakega od njih je značilna lastna velikost in gibanje z individualno hitrostjo. Lahko je besedilo ali slika (na zahtevo ustvarjalcev vira).

paralaksno pomikanje
paralaksno pomikanje

Dojemanje obiskovalca spletnega mesta

Potem je oseba običajno pozorna na to, da je stran oblikovana kakovostno, priročno in dobro obveščena. To dejstvo se običajno spoštuje. Zgodi se, da se pojavi radovednost, da bi poskusili druge elemente. Na internetu je ogromno identičnih spletnih mest. Kako narediti svoj vir poseben?

Če vam je dizajn všeč, bo obiskovalec ostal dlje časa. Tako se poveča verjetnost, da ga bodo pritegnile objavljene informacije, pokazal bo zanimanje. Posledično bo oseba uporabila ponujeno storitev, izdelek ali promocijsko ponudbo.

Priljubljene stare igre

Koncept "paralakse" bi moral biti znan vsemljubitelji konzol iz 80. in 90. let. To velja za igre:

  1. Mario Bros.
  2. Mortal Kombat.
  3. Streets of Rage.
  4. Moon Patrol.
  5. Želve v času.

To pomeni, da je paralaksa tehnika, ki se uporablja že precej dolgo. Teh iger se res spominjamo z nekaj nostalgije. Navsezadnje se zdi, da so prežeti z značajem tistega obdobja.

Slike na zaslonu so ustvarjene s tehniko, kot je paralaksno drsenje. Nič ni presenetljivo v tem, da je ta tehnika pridobila zasluženo priljubljenost. Ta koncept oblikovanja so toplo sprejeli tisti, ki so igrali v 80.-90. letih ali spremljali prosti čas prijateljev.

kako narediti paralakso
kako narediti paralakso

pomikanje paralakse

Tržniki vodilnih svetovnih blagovnih znamk že dolgo uporabljajo vse vrste tehničnih napredkov. Tako je mogoče za spletno stran zanimati celo naključnega obiskovalca.

Pomikanje paralakse je Nike dokaj uspešno uporabljal. Prvotno spletno mesto podjetja sta oblikovala Weiden in Kennedy. Toda ta zasnova ni preživela. Vir se je postopoma posodabljal v skladu s trendi našega časa. Activatedrinks.com je primer spletnega mesta, katerega dizajn spominja na tisto, ki so jo uporabljali tržniki Nike tistega obdobja.

primeri paralakse
primeri paralakse

Zvočnikov ne bi smelo biti preveč

Ne pozabite, da je oblikovanje strani pogosto ključni kriterij, ki vodi obiskovalca. Slabo izvedenovir običajno pusti uporabnika vtis neresnosti lastnika podjetja. Toda spletno mesto z vsemi vrstami privlačnih oblikovnih elementov kaže na željo lastnikov organizacije, da zanimajo obiskovalce.

Tukaj se je vredno spomniti na paralakso. To je čudovito orodje. A tudi oni se ne bi smeli preveč zanesti. Ker je stran, na kateri je veliko različnih vrst gibljivih elementov, precej težko zaznavna. Najbolje je, da je dizajn zmerno eleganten in razumljiv.

Dinamični morajo biti posamezni elementi, ki zahtevajo izbiro. Obstaja lahko tudi slika, ki je ustvarjena z uporabo plasti, ki se premikajo ena glede na drugo. Ne pozabite, da je uporabniška stran zasnovana predvsem za obiskovalce. Ni nujno, da je to mojstrovina spletnega skrbnika, ki je vanjo vložil vse svoje znanje. Konec koncev bo tak pristop samo zapletel zaznavanje.

učinek paralakse za spletno mesto
učinek paralakse za spletno mesto

Kako ustvariti navigacijo po spletnem mestu

Kako narediti paralakso? To vprašanje zanima številne ustvarjalce spletnih mest. Ni treba poznati zapletenosti pisanja oznak. Zelo priročno je uporabljati posebne vire na internetu. Iz velikega števila razpoložljivih predlogov lahko ločimo naslednje pomočnike:

  1. Plax je program, ki je dokaj enostaven za uporabo. S premikanjem miške naredi stran tekoče.
  2. jQuery Parallax Image Slider – vtičnik jQuery, ki se uporablja za ustvarjanje drsnikov slik.
  3. Jquery Image Parallax - primeren za oblikovanje preglednih risb. Z uporabo PNG-jev se GIF-ji poglobijo, animirani z gibanjem.
  4. Curtain.js se uporablja za ustvarjanje strani s fiksnimi ploščami. V tem primeru je opazen učinek odpiranja zaves.
  5. Scrolling Parallax: Vtičnik jQuery ustvarja učinek paralakse pri pomikanju kolesca miške.
paralaksa, zasidrana na kazalec
paralaksa, zasidrana na kazalec

Še nekaj uporabnih vtičnikov

Kot veste, so informacije največje vrednosti. In več kot je znano število načinov za doseganje želenega, večja je verjetnost, da dobimo pravilen rezultat. Uporabni vtičniki za ustvarjanje dinamike:

  1. jQuery drsna pot - uporablja se za postavljanje predmetov na določeno pot.
  2. Scrollorama je vtičnik jQuery. Uporablja se kot orodje za privlačno oblikovanje materialov. Omogoča vam, da "oživite" besedilo na strani zaradi priročnega pomikanja.
  3. Scrolldeck je vtičnik jQuery. Je odlična predstavitvena rešitev za enostranska spletna mesta.
  4. jParallax predstavlja premikanje slojev, odvisno od gibanja kazalca miške.
  5. Stellar.js je vtičnik, s katerim je kateri koli element oblikovan z dodatkom učinka pomikanja paralakse.
primeri učinka paralakse
primeri učinka paralakse

Paralaksa zasidrana na kurzor

Ta paralaksa izgleda zelo impresivno. Na prvi pogled negibnopredmeti strani spletnega mesta se premaknejo, ko se miškin kazalec približa. Zdi se, da oživi in sledi elementu, ki se premika.

Najprej se ustavite pri sliki. Zahtevana slika je postavljena v okvir, njeni robovi pa morajo biti skriti. Metoda je zelo preprosta in nastala risba je videti precej privlačna.

Učinek paralakse za spletno mesto je čudovit način oblikovanja. Njegova uporaba kaže, da je bila ustvarjanju vira posvečena ustrezna pozornost. Zato je vredno biti pozoren na ponujene storitve ali informacije, ki jih je treba prebrati. Takšna spletna mesta so videti bolj ugodna v ozadju enakih, a preprosto zasnovanih virov.

Priporočena: