Parallax da ... Parallax efektua: adibideak

Mugimenduan, paralajeak objektu baten kokapena lekuz aldatzen duen behatzailearen erlatiboa aldatzen du. Epe hau ospea irabazi du Interneten. Bereziki, interesgarria da guneari begiratzea, diseinuan elementu dinamikoak baitira. Parallax web orri bat diseinatzeko modu bat da, webmasters-ek erabilitako bisitari kopuru handi bat erakartzeko.

Zer da parallax?

Parallax korratura bertikalki erabil daiteke, baita lerro zuzenean ere. Adibide gisa, Nintendo egokiena. Gutako askok nostalgiaz gogoratzen dira pantailako ezkerreko aldean protagonistaren mugimenduek irudikatzen dituzten ordenagailu jokoak. Era berean, beherantz mugitzen da bertikalki lerro zuzenean zehar. Parallax efektua sarritan erabiltzen da. Barra bertikal bat sortzeko, JavaScript edo CSS 3 erabil dezakezu.

Haientzat, hiru dimentsioko espazio-efektu deskribatua ezaugarri da. Jolasen sortzaileek hainbat atzeko planoko geruza erabiltzen zituzten. Testura ezberdina da, abiadura ezberdinetan egiten ari den mugimenduarekin.

Ez pentsa paralelismoa 3D efektu bat sortzeko aukera besterik ez dela. Orrialdean, lehendik dauden ikonoak mugitu ditzakezu. Gainera, nahikoa erakargarria dirudi. Aukera bereziki arrakastatsua da horietako bakoitzaren banakako ibilbidea erabiltzea. Kasu honetan, ibilbide desberdinetan zehar ikono ezberdinak erabiltzen dira. Diseinu honek arreta erakartzen du.

Irudi animatua

Irudikorik gabeko gune bat da zaila. Marrazki kualitatibo eta ilustratzaileek bisitariak erakartzen dituzte. Baina arreta handirik ematen zaio irudi dinamiko guztiei. Izan ere, gune bat bisitatzen denean trafikoa nabaritzen bada, arreta erakartzen du. Irudi dinamiko bati baliabide bisitaria itzultzeko aukera nabarmen handitzen da. Eta mugitzen zen ala ez? Hori dela eta, gune bisitariak erakartzeko, paralaxia efektuaren kontzeptua aztertu beharra dago.

Irudi mugikorreko guneak adibide:

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

Adibideetan agertzen den bezala, hautemateak menu goitibeherako menua hobetzen du. Elementu honek bisitariei denbora aurrezten die eta, horregatik, erakargarria da.

JQuery liburutegia

JQueryParallax terminoa izen bereko liburutegi bat definitzen du. Horregatik, mugimenduaren efektua 3Dan erraz lortzen da. JQuery liburutegian, hiru dimentsioko pertzepzioa modu ezberdinetan sortzen da. Horietako bat abiadura ezberdineko atzeko planoko objektu horizontalen aldi berean mugitzen da. Liburutegi hau propietate mota ezberdin ugari dago. Hemen deskribatzen den desplazamendua bere aukera guztien zati txiki bat besterik ez da.

Guneak itxura erakargarria dirudi, elementu modernoak erabiltzen ziren sortzeko. Horietako bat paralaxia da. Baliteke adibide guneak itxura hau izatea:

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

JParallax mugitzen den geruzak irudikatzen ditu. Elementu dinamikoentzat, kokapen absolutua (posizioa: absolutua;) tipikoa da. Bakoitzak bere tamaina eta mugimendua bereizten ditu abiadura indibidualarekin. Testu edo irudia izan daiteke (baliabidearen sortzaileen eskaerarekin).

Gune baten bisitariaren pertzepzioa

Horren ondoren, jendeak normalean arreta berezia ematen dio orriari kualitatiboki, modu egokian eta trebetasunez apainduta. Izan ere, normalean errespetua sortzen du. Batzuetan, beste elementu batzuk ikusteko bitxikeria da. Interneten gune berdinak daude. Nola egin zure baliabide berezia?

Diseinua atsegina bada, bisitaria luzeagoa izango da. Horrela, argitaratutako informazioa erakarriko duen probabilitatea handituko da, interesak erakutsiko ditu. Ondorioz, pertsona batek eskainitako zerbitzua, produktua edo publizitate eskaintza erabiliko du.

Gogoko jokoak zaharrak

"Parallax" kontzeptua 80-90eko kontsolen zale guztientzat ezaguna izan behar luke. Joko hau aplikatzen da:

1. Mario Bros.
2. Mortal Kombat.
3. Rage kaleetan.
4. Moon Patrol.
5. Turtles in Time.

Hau da, parallaxak epe luzean erabiltzen duen teknika da. Jolas hauek nostalgia batzuk gogoratzen dira. Azkenean, garai hartan izaera hartan imajinatu zuten.

Irudiak pantailan sortzen dira, adibidez, parallax-korritze gisa. Ez da harritzekoa metodo honek ongi merezitako ospea irabazi duela. Diseinu kontzeptu hau 80-90eko hamarkadan jotzen zutenek edo lagunen aisialdia ikusi zuten.

Parallax desplazamendua

Munduko marka nagusien marketinek denbora asko behar izan dute lorpen teknikoak egiteko. Horrela, gune honetako bisitari bisualak ere interesgarria izan liteke.

Parallax korritze oso ona izan da Nike-k. Konpainiaren jatorrizko orrialde garapena Weiden eta Kennedy diseinatzaileek parte hartu zuten. Baina diseinua ez da mantentzen. Errekurtsoa pixkanaka eguneratu egin da, modernitatearen joerarekin bat etorriz. Activatedrinks.com gune baten adibidea da, zeinen diseinuak zehaztutako epealdian Nike merkaturatzaileek erabiltzen duen diseinuaren antza baitu.

Hiztunak ez dira asko

Ez ahaztu gunearen diseinua bisitariak gidatzen duen irizpide gako bat dela. Baliabide gaizki exekutatuta, normalean, erabiltzaileak enpresaren jabearen frivolitatearen inpresioa uzten dio. Baina diseinu erakargarri erakargarria duen gunea erakundearen jabeek bisitariei interesatzen zaien desioa adierazten dute.

Hemen, parallaxari buruz gogoan izan beharra dago. Hau tresna zoragarria da. Baina ez dira ihes egin behar. Orrialdea, elementu mugikorren mota asko dagoelako, nahiko zaila da hautematea. Hobe da dekorazioa modestea eta ulergarria izatea.

Dinamikak esleipena behar duten elementu partikularrak izan beharko lituzke. Dagokion marrazkia ere badago, bata bestearekin mugitzen diren geruzak erabiliz. Ez ahaztu erabiltzailearen gunea bisitariarentzako lehenik eta behin egiten dela. Ez luke inolako ezagutza guztia inbertitu duen web maisuen maisu izan. Azken finean, ikuspegi honek pertzepzioa zailduko du.

Nola sortu gune migrazioa

Nola egin parallax? Galdera hau oso interesgarria da gune sortzaileentzat. Ez da beharrezkoa idazteko etiketak itsastea. Oso egokia da Interneten baliabide bereziak erabiltzea. Eskuragarri dauden proposamen ugariengatik, honako laguntzaileak bereiz daitezke:

1. Plax oso erraza da erabiltzeko programa. Mugagabea mugitzeko mugikortasuna emateko berezko da.
2. JQuery Parallax Irudi Slider - JQuery plugina irudiaren graduatzaileak sortzeko erabiltzen da.
3. Jquery Image Parallax - marrazki gardenak diseinatzeko egokia. PNGren erabilerari esker, GIFek sakonera lortzen dute, mugimenduaren bidez.
4. Curtain.js panel finkoekin hornitutako orria sortzeko erabiltzen da. Kasu honetan, gortinak irekitzea eragiten da.
5. Parallax-en desplazamendua: jQuery Plugina parallax efektua sortzeko saguaren gurpila mugitzen duzunean.

Gehigarri batzuk

Ezagutzen duzun bezala, informazio baliotsuena da. Eta nahi den bidea lortzeko modurik ezagunena ezaguna da, emaitza zuzena lortzeko probabilitatea gertuago dago. Dinamikak sortzeko erabiltzen diren plugin erabilgarriak:

1. JQuery Scroll Path - erabilitako objektuak zehaztutako bidea erabiltzen du.
2. Scrollorama - jQuery-plugin. Materialaren diseinu erakargarrirako tresna gisa erabiltzen da. Eskuragarriak diren korritzeak orriaren testua "biziberritzeko" aukera ematen du.
3. Scrolldeck - jQuery-plugin. Irtenbide zoragarria da, orrietarako aurkezpen gisa erabiltzen da, orrialde bakar gisa diseinatua.
4. JParallax-ek geruzen desplazamendua adierazten du saguaren erakuslearen mugimenduaren arabera.
5. Stellar.js plug-in da, elementu guztien laguntzarekin, parallax-korritze efektuarekin batera.

Parallax kurtsorearen erreferentzia

Parallax hau nahiko eraginkorra dirudi. Hasierako orrietan konpondutako objektuak orriaren orrialdeak mugitu egiten dira kurtsorea hurbiltzen denean . Badirudi bizia eta hunkigarria den elementua jarraitzen duela.

Lehenik eta behin, figura begiratu behar dugu. Eskatutako irudia marko batean dago, ezkutatuta dauden ertzak dituena. Metodoa oso erraza da, eta ondorioz marrazkia nahiko erakargarria da.

Gune horretarako parallax efektua diseinu zoragarria da. Bere erabilera adierazten du baliabide sortzea arreta eman dela. Hori dela eta, merezi du irakurketarako eskaintzen diren zerbitzuen edo informazioaren arreta. Gune horiek hobeto aprobetxatzen dira baliabide berdinen eta apainduen atzeko planoaren aurrean.