Parallax - ito ... paralaks epekto: halimbawa

Ang galaw paralaks ay nangangahulugan ng isang pagbabago sa lokasyon ng isang bagay sa anumang background na kamag-anak sa mga tagamasid, sino ang sa lugar. Ang terminong nagkamit popularity sa Internet. Sa partikular, ito ay kagiliw-giliw na upang tumingin sa mga site, na kung saan ay naroroon sa mga disenyo ng mga dynamic na mga sangkap. Parallax - isang paraan upang idisenyo pahina sa Internet na ginagamit ng mga webmaster upang maakit ang isang malaking bilang ng mga bisita.

Ano ang parallax

Paralaks-scroll ay maaaring gamitin nang patayo at sa isang tuwid na linya. Bilang halimbawa, ang pinaka-angkop Nintendo. Marami sa atin na may galimgim computer games kinakatawan sa paggalaw ng mga pangunahing mga character mula sa kaliwang bahagi sa kanan ng screen. Posible rin upang ilipat pababa, natupad sa pamamagitan ng isang patayo itapon diretso. Paralaks epekto sa network ay madalas na ginagamit. Maaari mong gamitin ang JavaScript o CSS 3 upang lumikha ng isang vertical slider.

Para sa kanila, lamang kakaiba inilarawan ang three-dimensional na spatial epekto. Ang mga tagalikha ng laro ng maramihang mga layer ng background ay ginamit. Naiiba sila sa texture, ang mga kilusan ay isinasagawa sa isang iba't ibang mga rate.

Huwag isipin na ang parallax - ito ay lamang na posible upang lumikha ng isang 3D na effect. umiiral na mga icon ay maaaring inilipat sa pahina. Lalo na, ito asta ganap kaakit-akit. Lalo na ang pinakamahusay na opsyon ay ang paggamit ng isang indibidwal trajectory para sa bawat isa sa kanila. Sa kasong ito, ginagamit nito iba't ibang mga icon upang mag-navigate sa pamamagitan ng iba't ibang mga landas. Disenyo na ito ay umaakit ng pansin.

reviving ang larawan

Ito ay mahirap upang mahanap ang isang site na walang mga larawan. Kalitatibong ginawa at nagpapahiwatig numero maakit ang mga bisita. Ngunit higit na pansin sanhi ng lahat ng uri ng mga dynamic na imahe. Sa katunayan, kung ang sinusunod kilusan, ito umaakit pansin kapag pagbisita sa site. Makabuluhang pinatataas ang posibilidad na bumalik na bisita ng mapagkukunan sa isang dynamic na imahe. At ito tila upang ilipat o hindi? Samakatuwid, upang upang akitin ang mga bisita sa site ay dapat na-aral tulad ng isang bagay bilang ang paralaks epekto.

Mga halimbawa ng mga website na may gumagalaw na larawan:

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

Tulad ng ipinakita sa mga halimbawa, ang pagdama nagpapabuti sa pulldown menu item. Ang ganitong mga isang elemento nakakatipid ng oras ang mga bisita kaya kaakit-akit sa kanila.

jQuery library

Kataga jQueryParallax matukoy ang eponymous library. Salamat sa ito ay madali upang makamit ang epekto sa 3D paggalaw. Ang jQuery library ng mga tatlong-dimensional na pang-unawa ay nilikha sa iba't-ibang mga paraan. Ang isa sa kanila ay pahalang habang nililipat ang background bagay sa iba't ibang mga bilis. Para sa library na ito ay may posibilidad na ang malaking bilang ng mga iba't ibang mga uri ng mga ari-arian. At ang pag-aalis ng inilarawan dito ay kumakatawan lamang ng isang maliit na bahagi ng kanyang kakayahan.

Mukhang medyo kaakit-akit na site, na kung saan ay upang lumikha ng isang iba't ibang mga modernong elemento ay nai-ginamit. Ang isa sa kanila - ang paralaks. Mga halimbawa ng mga site ay maaaring maging ganito ang hitsura:

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

jParallax iniharap layer, paggalaw sa mouse ay inilipat. Para sa mga dynamic na katangian ng absolute elemento positioning (position: absolute;). Ang bawat isa sa mga ito ay nailalarawan sa pamamagitan ng kanyang sukat at pagkilos upang ang mga indibidwal na rate. Maaaring ito ay isang teksto o isang larawan (opsyonal resource creators).

Ang pang-unawa ng mga bisita ng website

Pagkatapos nito, ang mga tao ay karaniwang magbayad ng pansin sa ang katunayan na ang pahina ay naka-frame mataas na kalidad, maginhawa at competently. Ang katotohanang ito ay karaniwang isang bagay ng paggalang. Minsan pag-usisa upang maranasan ang iba pang mga elemento lumabas. Sa Internet mayroong isang malaking bilang ng mga magkakahawig na mga sites. Paano upang gumawa ng espesyal na ang iyong buhay?

Kung ang disenyo na gusto mo, pagkatapos ay ang mga bisita ay mananatili para sa isang mas matagal na panahon. Sa gayon, madaragdagan ang posibilidad na ito ay maakit upload na impormasyon, siya ay nagpapakita ng interes. Sa katapusan, ang mga tao ay samantalahin ng mga serbisyo na inaalok, produkto o promotional alok.

Mga Paboritong old games

Ang konsepto ng "paralaks" ay dapat na pamilyar sa lahat ng mga tagahanga ng mga console 80-90s. Ito ay sumasaklaw sa mga laro:

1. Mario Bros.
2. Mortal Kombat.
3. Kalye ng galit.
4. Moon Patrol.
5. Pagong sa Time.

Iyon ay, ang parallax - isang pamamaraan na gumagamit ng isang sapat na mahabang panahon. Ang mga laro ay talagang isipin na may ilang mga galimgim. Pagkatapos ng lahat, kung sila ay tiomak na may mga katangian ng panahon.

Mga imahe sa screen ay nilikha gamit ang mga pamamaraan na tulad ng paralaks-scroll. May ay walang kagulat-gulat sa ang katunayan na ang paraan na ito ay nakakuha ng isang mahusay na marapat katanyagan. Ang design concept ay mainit-init sapat na pinaghihinalaang sa pamamagitan ng mga taong-play sa 80-90 na taon at pinanood paglilibang na mga kaibigan.

paralaks-scroll

Marketer ng mga nangungunang tatak na katagal ginagamit ng lahat ng uri ng mga teknolohikal na advances. Kaya, ito ay posible na interes kahit sa kaswal bisita sa site.

Paralaks-scroll nai-lubos na matagumpay na ginagamit sa Nike ni. Ang pag-unlad ng orihinal na site ng kumpanya ay nakikibahagi designer Weiden at Kennedy. Gayunman, ang design ay hindi mapangalagaan. Source unti-unting na-update ayon sa modernong mga uso. Activatedrinks.com - halimbawa ng isang site na kung saan ang disenyo ay nakapagpapaalaala ng palamuti na ginagamit ng mga marketer Nike tinukoy na tagal ng panahon.

Speaker ay hindi dapat maging mas

Huwag kalimutan na ang disenyo ng site ay madalas ay isang mahalagang criterion na ang mga gabay ng bisita. Maganda ang ginawa buhay ay karaniwang nag-iiwan ang gumagamit ng impresyon ng kawalang-ingat ng ang may-ari ng kumpanya. At dito ay isang site na may lahat ng uri ng kaakit-akit na mga elemento ng disenyo ay nagpapahiwatig pagsusumikap na may-ari ng samahan na interesado mga bisita.

Ito ay nagkakahalaga ng tandaan ang paralaks. Ito ay isang kahanga-hangang tool. Ngunit kahit hindi nila kailangan marami na makibahagi. Dahil sa pahina kung saan may mga isang malaking bilang ng mga iba't ibang mga uri ng mga mobile na mga elemento, ay masyadong kumplikado upang maunawaan. Ito ay pinakamahusay na upang gumawa ng isang clearance sa abot ng naka-istilong at madaling gamitin.

Dynamic dapat na hiwalay na mga elemento na nangangailangan ng paghihiwalay. Gayundin maaari itong maging kasalukuyan pagguhit, na kung saan ay nilikha sa pamamagitan ng paggamit ng paggalaw ng isang kaugnayan sa iba pang mga layer. Huwag kalimutan na ang site user ay ginawa lalo na para sa mga bisita. Hindi ito dapat maging isang web master obra maestra, ilagay ang lahat ng kanyang kaalaman. Pagkatapos ng lahat, tulad ng isang diskarte ay lamang makapagpalubha pang-unawa.

Paano lumikha ng isang kilusan online

Paano gumawa ng isang parallax? Ang isyu na ito ay napaka-interesado sa maraming mga tagalikha website. Hindi kailangang malaman ang intricacies ng pagsusulat ng mga tag. Ito ay napaka-maginhawa upang gamitin ang mga espesyal na mga mapagkukunan sa Internet. Ng malaking bilang ng mga umiiral na mga panukala ay ang mga sumusunod iniuugnay:

1. Plax - programa, na kung saan ay medyo madaling gamitin. Siya ay may posibilidad upang bigyan ang kadaliang mapakilos ng pahina sa pamamagitan ng paggalaw sa mouse.
2. jQuery paralaks Slider ng Imahe - jQuery plugin na ginamit upang lumikha ng mga slider ng imahe.
3. Jquery Imahe Parallax - angkop para sa dekorasyon ng transparent na mga imahe. Salamat sa paggamit nito ng PNG, GIF mamana depth, buhay na buhay na paggalaw.
4. Curtain.js ginamit upang likhain ang pahina, nilagyan ng isang nakapirming panel. Sa kasong ito, diyan ay ang epekto ng pagbubukas ng kurtina.
5. Pag-scroll paralaks: Ang isang jQuery Plugin ay upang lumikha ng isang paralaks epekto kapag mag-scroll ka sa mouse wheel.

Ilang kapaki-pakinabang na plugin

Bilang ay kilala, ang pinakamahalaga ay ang impormasyon. At ang mas malaki ang bilang ng mga paraan upang makamit ang ninanais na kilala, ang mas malapit ang posibilidad ng pagkuha ng isang tamang resulta. Kapaki-pakinabang na mga plug-in na ginagamit upang lumikha ng dynamics ng:

1. jQuery Scroll Path - ginagamit upang ilagay ang mga bagay sa ang mga tinukoy na path.
2. Scrollorama - jQuery-plugin. Ito ay ginagamit bilang isang kasangkapan para sa kaakit-akit na pagtatanghal na materyales. Ito ay nagbibigay-daan sa madaling pag-scroll dahil sa "muling magkamalay-tao" ang teksto na makukuha sa pahina.
3. Scrolldeck - jQuery-plugin. Ito ay isang mahusay na solusyon para sa paggamit bilang isang pagtatanghal para sa site, na idinisenyo bilang isang solong pahina.
4. jParallax ay lumilipat layer depende sa paggalaw ng mouse pointer.
5. Stellar.js - plug pamamagitan ng kung saan ang bawat elemento ay ginawa gamit ang karagdagan ng paralaks epekto pag-scroll.

Parallax na may reference sa ang cursor

Sumapat ito epektibo hitsura ng parallax. Pa rin sa unang pahina ng isang bagay Ang site ay inilipat sa pagsapit ng ang mouse pointer. Nagmumula ito sa buhay at sumusunod sa mga palipat-lipat elemento.

Unang stop ay dapat na ang figure. Ang ninanais na imahe ay nakalagay sa frame, na may mga gilid na nais mong itago. Ang pamamaraan ay napaka-simple, at ang kaya nakuha pattern mukhang medyo kaakit-akit.

Paralaks epekto para sa isang site - ito ay isang kahanga-hangang paraan upang mag-disenyo. ang paggamit nito ay nagmumungkahi na ang paglikha ng isang mapagkukunan ay ibinigay dahil pansin. Samakatuwid ito ay kinakailangan upang bigyang-pansin ang mga serbisyo na inaalok o impormasyon upang mabasa. Ang mga site hitsura mas may pakinabang laban sa background ng mga magkakahawig, ngunit Pinalamutian nang simple resources.