In motion, parallax ay nangangahulugan ng pagbabago sa lokasyon ng isang bagay laban sa ilang background na nauugnay sa isang observer na nasa lugar. Ang terminong ito ay nakakuha ng katanyagan sa Internet. Sa partikular, ang site ay mukhang kawili-wili, sa disenyo kung saan mayroong mga dynamic na elemento. Ang Parallax ay isang diskarte sa disenyo ng web page na ginagamit ng mga webmaster upang makaakit ng malaking bilang ng mga bisita.
Ano ang paralaks
Parallax scrolling ay maaaring gamitin nang patayo gayundin sa isang tuwid na linya. Ang Nintendo ay ang pinakamahusay na halimbawa. Naaalala ng marami sa atin ang mga laro sa computer na nostalgia, na kinakatawan ng paggalaw ng mga pangunahing karakter mula sa kaliwang bahagi ng screen patungo sa kanan. Posible rin na lumipat pababa, na isinasagawa kasama ang isang patayong tuwid na linya. Ang paralaks na epekto sa web ay kadalasang ginagamit. Maaari mong gamitin ang JavaScript o CSS para gumawa ng vertical slider 3.
Ang inilarawang three-dimensional spatial effect ay katangian lamang ng mga ito. Ang mga tagalikha ng mga laro ay gumamit ng ilang mga layer ng background. Nag-iiba sila sa texture, habang ang paggalaw ay isinasagawa na may iba't ibangbilis.
Huwag isipin na ang parallax ay isang 3D effect lamang. Sa page, maaari mong ilipat ang mga kasalukuyang icon. Bukod dito, mukhang medyo kaakit-akit. Ang isang partikular na mahusay na pagpipilian ay ang paggamit ng isang indibidwal na tilapon para sa bawat isa sa kanila. Sa kasong ito, iba't ibang mga icon ang ginagamit, na gumagalaw sa iba't ibang mga tilapon. Nakakaakit ng pansin ang disenyong ito.
Buhay ang larawan
Mahirap maghanap ng site na walang mga larawan. Ang mga de-kalidad at demonstrative na drawing ay nakakaakit ng mga bisita. Ngunit ang pinaka-pansin ay iginuhit sa iba't ibang uri ng mga dynamic na imahe. Sa katunayan, kung mayroong paggalaw kapag bumibisita sa isang site, nakakaakit ito ng pansin. Malaking pinapataas ang posibilidad na bumalik ang isang bisita sa isang mapagkukunan sa isang dynamic na larawan. Parang gumalaw ba ito o hindi? Samakatuwid, upang maakit ang mga bisita sa site, sulit na pag-aralan ang isang bagay tulad ng parallax effect.
Mga Halimbawa ng Paglipat ng Larawan sa Site:
- hvorostovsky.com;
- www.kagisointeractive.com.
Tulad ng ipinapakita sa mga halimbawa, ang karanasan ay pinahusay ng mga drop-down na menu sa mga sub-item. Ang ganitong elemento ay nakakatipid ng oras para sa mga bisita, samakatuwid ito ay kaakit-akit sa kanila.
jQuery library
Ang terminong jQueryParallax ay tumutukoy sa library ng parehong pangalan. Salamat dito, madaling makamit ang epekto ng paggalaw sa 3D na format. Sa library ng jQuery, ang 3D perception ay nilikha sa iba't ibang paraan. Ang isa sa mga ito ay binubuo sa pahalang na sabay-sabay na paggalaw ng mga bagay sa background na mayibang bilis. Ang library na ito ay nailalarawan sa pagkakaroon ng isang malaking bilang ng iba't ibang uri ng mga ari-arian. At ang displacement na inilalarawan dito ay maliit na bahagi lamang ng mga kakayahan nito.
Mukhang medyo kaakit-akit ang site, para sa paglikha kung saan ginamit ang iba't ibang modernong elemento. Ang isa sa kanila ay paralaks. Maaaring ganito ang hitsura ng mga halimbawang site:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
Ang jParallax ay kinakatawan ng mga layer na gumagalaw gamit ang mouse. Ang mga dinamikong elemento ay nailalarawan sa pamamagitan ng ganap na pagpoposisyon (posisyon:ganap;). Ang bawat isa sa kanila ay nailalarawan sa sarili nitong laki at paggalaw sa isang indibidwal na bilis. Maaari itong maging text o larawan (sa kahilingan ng mga gumawa ng mapagkukunan).
Persepsyon ng bisita sa site
Pagkatapos nito, karaniwang binibigyang pansin ng isang tao ang katotohanan na ang page ay idinisenyo nang may mataas na kalidad, maginhawa at may kaalaman. Ang katotohanang ito ay karaniwang iginagalang. Ito ay nangyayari na ang pag-usisa ay lumitaw upang subukan ang iba pang mga elemento. Mayroong isang malaking bilang ng mga magkatulad na site sa Internet. Paano gawing espesyal ang iyong mapagkukunan?
Kung gusto mo ang disenyo, mananatili ang bisita nang mas mahabang panahon. Kaya, ang posibilidad na siya ay maakit ng mga nai-post na impormasyon ay tumataas, siya ay magpapakita ng interes. Bilang resulta, gagamitin ng isang tao ang inaalok na serbisyo, produkto o pampromosyong alok.
Mga paboritong lumang laro
Ang konsepto ng "parallax" ay dapat na pamilyar sa lahatconsole fan ng 80s at 90s. Nalalapat ito sa mga laro:
- Mario Bros.
- Mortal Kombat.
- Streets of Rage.
- Moon Patrol.
- Mga Pagong sa Oras.
Ibig sabihin, ang parallax ay isang technique na medyo matagal nang ginagamit. Ang mga larong ito ay talagang naaalala na may ilang nostalgia. Kung tutuusin, parang napuno sila ng karakter ng panahong iyon.
Ang mga larawan sa screen ay ginawa gamit ang isang diskarte gaya ng parallax scrolling. Walang nakakagulat sa katotohanan na ang pamamaraan na ito ay nakakuha ng karapat-dapat na katanyagan. Ang konsepto ng disenyong ito ay mainit na tinatanggap ng mga naglaro noong 80s-90s o nanood ng oras ng paglilibang ng mga kaibigan.
Parallax scrolling
Matagal nang ginagamit ng mga marketer ng mga nangungunang brand sa mundo ang lahat ng uri ng teknikal na pagsulong. Kaya, nagiging posible na maging interesado kahit isang kaswal na bisita sa site.
Parallax scrolling ay medyo matagumpay na ginamit ng Nike. Ang orihinal na website ng kumpanya ay idinisenyo nina Weiden at Kennedy. Ngunit ang disenyo na ito ay hindi nakaligtas. Ang mapagkukunan ay unti-unting na-update, alinsunod sa mga uso sa ating panahon. Ang Activatedrinks.com ay isang halimbawa ng isang site na ang disenyo ay nakapagpapaalaala sa ginamit ng mga Nike marketer noong panahon.
Ang mga nagsasalita ay hindi dapat masyadong marami
Huwag kalimutan na ang disenyo ng site ang kadalasang pangunahing kriterya na gumagabay sa bisita. Hindi maganda ang naisakatuparanang mapagkukunan ay karaniwang nag-iiwan sa gumagamit ng impresyon ng kawalang-galang ng kumpanya ng may-ari. Ngunit ang isang site na may lahat ng uri ng mga kaakit-akit na elemento ng disenyo ay nagpapahiwatig ng pagnanais ng mga may-ari ng organisasyon na mainteresan ang mga bisita.
Narito ito ay nagkakahalaga ng pag-alala tungkol sa paralaks. Ito ay isang kahanga-hangang tool. Ngunit kahit sila ay hindi dapat masyadong madala. Dahil ang pahina, kung saan mayroong isang malaking bilang ng iba't ibang uri ng mga gumagalaw na elemento, ay medyo mahirap makita. Pinakamainam na gawing katamtamang istilo at naiintindihan ang disenyo.
Ang Dynamic ay dapat na mga indibidwal na elemento na nangangailangan ng pagpili. Maaaring mayroon ding isang larawan na nilikha gamit ang mga layer na gumagalaw sa isang kamag-anak sa isa pa. Huwag kalimutan na ang site ng gumagamit ay pangunahing idinisenyo para sa mga bisita. Hindi ito kailangang maging isang obra maestra ng isang webmaster na naglagay ng lahat ng kanyang kaalaman dito. Pagkatapos ng lahat, ang ganitong paraan ay magpapalubha lamang ng perception.
Paano gumawa ng site navigation
Paano gumawa ng paralaks? Ang tanong na ito ay interesado sa maraming mga tagabuo ng website. Hindi kinakailangang malaman ang mga intricacies ng pagsulat ng mga tag. Napakaginhawang gumamit ng mga espesyal na mapagkukunan sa Internet. Mula sa malaking bilang ng mga panukalang magagamit, ang mga sumusunod na katulong ay maaaring makilala:
- Ang Plax ay isang program na medyo madaling gamitin. May posibilidad nitong gawing tuluy-tuloy ang page sa pamamagitan ng paggalaw ng mouse.
- jQuery Parallax Image Slider - Isang jQuery plugin na ginagamit upang lumikha ng mga slider ng larawan.
- Jquery Image Parallax - angkop para sa pagdidisenyo ng mga transparent na drawing. Sa pamamagitan ng kanyang paggamit ng mga PNG, lumalim ang mga GIF, na animo sa pamamagitan ng paggalaw.
- Curtain.js ay ginagamit upang gumawa ng page na may mga nakapirming panel. Sa kasong ito, makikita ang epekto ng pagbubukas ng mga kurtina.
- Scrolling Parallax: Ang isang jQuery Plugin ay upang lumikha ng parallax effect kapag nag-i-scroll sa gulong ng mouse.
Ilang mas kapaki-pakinabang na plugin
Tulad ng alam mo, ang impormasyon ang may pinakamalaking halaga. At mas malaki ang bilang ng mga paraan upang makamit ang ninanais ay kilala, mas malapit ang posibilidad na makuha ang tamang resulta. Mga kapaki-pakinabang na plugin na ginagamit upang lumikha ng dynamics:
- jQuery Scroll Path - ginagamit upang ilagay ang mga bagay sa tinukoy na path.
- Ang Scrollorama ay isang jQuery plugin. Ito ay ginagamit bilang isang tool para sa kaakit-akit na disenyo ng materyal. Binibigyang-daan kang "buhayin" ang teksto sa pahina dahil sa maginhawang pag-scroll.
- Ang Scrolldeck ay isang jQuery plugin. Ito ay isang mahusay na solusyon sa pagtatanghal para sa mga site ng isang pahina.
- Ang jParallax ay kumakatawan sa paggalaw ng mga layer depende sa paggalaw ng mouse pointer.
- Ang Stellar.js ay isang plugin kung saan idinisenyo ang anumang elemento na may pagdaragdag ng parallax scrolling effect.
Parallax na naka-angkla sa cursor
Mukhang kahanga-hanga ang paralaks na ito. Hindi gumagalaw sa unang tingingumagalaw ang mga bagay sa pahina ng site kapag lumalapit ang cursor ng mouse. Tila nabuhay ito at sumusunod sa elementong ginagalaw.
Una, dapat kang huminto sa larawan. Ang kinakailangang imahe ay inilalagay sa isang frame, habang ang mga gilid nito ay dapat na nakatago. Napakasimple ng pamamaraan, at mukhang kaakit-akit ang resultang pagguhit.
Ang Parallax effect para sa site ay isang magandang paraan sa pagdidisenyo. Ang paggamit nito ay nagpapahiwatig na ang nararapat na pansin ay binayaran sa paglikha ng mapagkukunan. Samakatuwid, ito ay nagkakahalaga ng pagbibigay pansin sa mga serbisyong inaalok o impormasyong babasahin. Ang ganitong mga site ay mukhang mas kapaki-pakinabang laban sa background ng magkapareho, ngunit simpleng dinisenyong mga mapagkukunan.
