Jinsi ya Kujenga Parallax Scrolling Kutumia Adobe Muse

Moja ya mbinu za "moto zaidi" kwenye wavuti leo ni scrolling parallax. Tumekuwa kwenye maeneo hayo ambapo unapozunguka gurudumu la kitabu kwenye panya yako na maudhui yaliyo kwenye ukurasa huenda juu na chini au kwenye ukurasa unapozunguka gurudumu la panya.

Kwa wale wapya kwenye kubuni wa wavuti na kubuni graphic, mbinu hii inaweza kuwa vigumu sana kufikia kutokana na kiasi cha CSS kinachohitajika.

Ikiwa inakuelezea, kuna idadi ya maombi ambayo inaweza tu kukataa wasanii wa graphic. Wao hutumia mbinu ya mpangilio wa ukurasa wa kawaida kwenye kurasa za wavuti, ambayo inamaanisha kuna mengi, ikiwa hakuna, coding inahusishwa. Programu moja ambayo imeshuka sana ni Adobe Muse.

Kazi inayofanywa na faida za michoro kutumia Muse ni ajabu sana na unaweza kuona sampuli ya nini unaweza kufanya kwa kutembelea Muse Site ya Siku . Ingawa faida za wavuti zinaonekana kuwa Muse kama aina ya "toy-up-toy", pia inatumiwa na waumbaji kuunda prototypes ya simu na mtandao ambazo hatimaye zitapewa kwa watengenezaji kwenye timu yao.

Mbinu moja ambayo ni rahisi sana kutekeleza na Muse ni scrolling parallax na, kama unataka kuona version kukamilika ya zoezi Sisi kutembea kupitia, kumweka browser yako kwa ukurasa huu. Unapozunguka gurudumu la panya yako, maandiko inaonekana kuhamia au chini ya ukurasa na picha zibadilika.

Tuanze.

01 ya 07

Unda Ukurasa wa Wavuti

Unapozindua Muse bonyeza Kiungo Mpya cha Site . Hii itafungua Mali Mahali Mpya . Mradi huu utaundwa kwa ajili ya programu ya desktop na unaweza kuuchagua kwenye Menyu ya awali ya Upangiaji wa chini. Unaweza pia kuweka maadili kwa idadi ya nguzo, upana wa Gutter, Margins, na Padding. Katika kesi hii, hatukuwa na wasiwasi mkubwa na hii na tu tulibofya OK .

02 ya 07

Weka Ukurasa

Unapoweka mali za tovuti na umebofya OK ulichukuliwa kwenye kinachojulikana Mpangilio wa Mpangilio . Kuna Ukurasa wa Mwanzo juu na Ukurasa wa Kwanza chini ya dirisha. Tunahitaji tu ukurasa mmoja. Ili kupata Tazama Mtazamo, tumebofya mara mbili ukurasa wa Mwanzo ambao ulifungua interface.

Kwenye kushoto ni zana chache za msingi na upande wa kulia ni paneli mbalimbali zinazotumiwa kuendesha maudhui kwenye ukurasa. Hapo juu ni mali, ambayo inaweza kutumika kwenye ukurasa, au chochote kilichochaguliwa kwenye ukurasa. Katika kesi hiyo, tulitaka kuwa na rangi nyeusi. Ili kukamilisha hili, tunabofya kwenye Chip ya rangi ya Futa ya Kivinjari na umechagua nyeusi kutoka kwa Picker ya Rangi.

03 ya 07

Ongeza Nakala kwenye Ukurasa

Hatua inayofuata ni kuongeza maandiko kwenye ukurasa. Tulichagua Nakala ya Nakala na tukavuta sanduku la maandishi. Tuliingia neno "Karibu" na, katika Malika kuweka maandiko kwa Arial, saizi 120 za Nyeupe. Kituo kilichokaa.

Kisha tulibadilisha kwenye chombo cha Uchaguzi, click kwenye Kitabu cha Maandishi na kuweka nafasi Y yake kwa saizi 168 kutoka juu. Na sanduku la maandishi bado limechaguliwa, tulifungua jopo la Align na tumeunganisha sanduku la maandishi kwenye kituo.

Hatimaye, pamoja na sanduku la maandishi lililochaguliwa, tulishikilia funguo cha Chaguo / Alt na Shift na tengeneza nakala nne za sanduku la maandishi. Tulibadilisha maandiko na nafasi Y ya kila nakala kwa:

Utaona, unapoweka eneo la sanduku la maandishi kila, ukurasa unasambaza ili ufikie eneo la maandiko.

04 ya 07

Ongeza picha ya Wahusika

Hatua inayofuata ni kuweka picha kati ya vitalu vya maandishi.

Hatua ya kwanza ni kuchagua Chombo cha Rectangle na kuteka sanduku letu linaloweka kutoka upande mmoja wa ukurasa hadi nyingine. Kwa mstati ulichaguliwa, tunaweka urefu wake hadi saizi 250 na nafasi Y yake kwa saizi 425 . Mpango ni kuwa na wao daima kunyoosha au mkataba kwa ukurasa wa upana ili kuzingatia browser user viewport. Ili kukamilisha hili, tulibofya kifungo cha upana wa 100% katika Mali. Nini hii ni kijivu nje ya thamani ya X na kuhakikisha picha ni mara kwa mara 100% ya upanaji wa maoni katika kivinjari.

05 ya 07

Ongeza picha kwa Washikiliaji wa Picha

Kwa Mstatili ulichaguliwa tulibofya Kiungo cha kujaza - sio Chip Chip - na ukabofya wino wa mage ili kuongeza picha katika mstatili. Katika eneo la kufaa , tulichagua Kiwango cha Kuunganisha na kubofya ushughulikiaji katikati katika eneo la Position ili kuhakikisha picha imetolewa katikati ya picha.

Kisha, tulitumia mbinu ya Chaguo / Alt-Shift-Drag ili kuunda nakala ya picha kati ya vitalu vya kwanza vya maandishi, ilifungua jopo la Kujaza na ukibadilisha picha kwa mwingine. Tulifanya hivyo kwa picha zilizobaki mbili pia.

Kwa picha zilizopo, ni wakati wa kuongeza mwendo.

06 ya 07

Ongeza Scrolling ya Parallax

Kuna njia kadhaa za kuongeza scrolling parallax katika Adobe Muse. Tutakuonyesha njia rahisi ya kufanya hivyo.

Kwa Jopo la kujaza wazi, bofya tab ya kitabu na, wakati inafungua, bofya kasha ya ufuatiliaji .

Utaona maadili kwa Mwendo wa Mwisho na Mwisho . Hizi huamua jinsi kasi ya picha inavyohusiana kuhusiana na Wheel Wheel. Kwa mfano, thamani ya 1.5 itahamasisha picha 1.5 mara kwa kasi kuliko gurudumu. Tulitumia thamani ya 0 ili kufunga picha zilizopo.

Mishale ya Horizontal na Vertical kuamua mwelekeo wa mwendo. Ikiwa maadili ni 0 picha hazitakuja bila kujali mchoro unachokifya.

Thamani ya kati- Position Key - inaonyesha uhakika ambapo picha zinaanza kuhamia. Mstari juu ya picha huanza, kwa picha hii, saizi 325 kutoka juu ya ukurasa. Wakati kitabu kinapofikia thamani hiyo picha itaanza kuhamia. Unaweza kubadilisha thamani hii kwa kuibadilisha kwenye boksi la mazungumzo au kwa kubonyeza na kuburusha uhakika juu ya mstari wa juu au chini.

Rudia hii kwa picha zingine kwenye ukurasa.

07 ya 07

Mtihani wa Kivinjari

Kwa hatua hii, tulikuwa tumekamilika. Jambo la kwanza tulilofanya, kwa sababu za wazi, lilikuwa ni kuchagua File> Hifadhi Tovuti . Kwa mtihani wa kivinjari, tulichagua Faili> Ukurasa wa Preview katika Browser . Hii ilifungua kivinjari cha kivinjari cha kompyuta yetu, na, wakati ukurasa ulifunguliwa, tumeanza kufungua.