Kif Oħloq Parallax Scrolling Bl-użu ta 'Adobe Muse

Waħda mit-tekniki "l-aktar sħan" fuq il-web illum hija l-scrolling parallax. Imxejna kollha f'dawk is-siti fejn iddawwar ir-rota tal-iscroll fuq il-maws u l-kontenut fuq il-paġna jiċċaqlaq u 'l isfel jew fuq il-paġna kif iddawwar ir-rota tal-maws.

Għal dawk ġodda fid-disinn tal-web u d-disinn grafiku, din it-teknika tista 'tkun ferm diffiċli biex tinkiseb minħabba l-ammont ta' CSS meħtieġ.

Jekk dak jiddeskrivi int, hemm numru ta 'applikazzjonijiet li jistgħu biss jappellaw lil artisti grafiċi. Huma bażikament jużaw approċċ familjari ta 'tqassim tal-paġna għal paġni tal-web, li jfisser li m'hemmx ħafna, jekk hemm, kodifikazzjoni hija involuta. Applikazzjoni waħda li verament għamlet rokit prominenza hija l-Adobe Muse.

Ix-xogħol li qed isir minn vantaġġi grafika permezz ta 'Muse huwa pjuttost aqwa u tista' tara teħid ta 'kampjuni ta' dak li tista 'tagħmel billi żżur is- Sit ta' Mulej ta 'Jum . Għalkemm il-pros tal-internet għandhom it-tendenza li jqisu lil Muse bħala xi tip ta '"ġugarell ta' stralċ", qed tintuża wkoll minn disinjaturi biex joħolqu prototipi mobbli u web li eventwalment jintbagħtu lill-iżviluppaturi fit-tim tagħhom.

Teknika waħda li hija oerhört faċli biex titwettaq ma 'Muse hija l-scrolling parallax u, jekk trid tara l-verżjoni kompluta ta' l-eżerċizzju Se nkunu mixi permezz ta ', point-browser għal din il-paġna. Meta timbotta r-rota tal-iscroll tal-maws, it-test jidher li jitla 'jew jitniżżel il-paġna u l-immaġini jinbidlu.

Ejja nibdew.

01 ta '07

Oħloq Web Page

Meta tniedi Muse ikklikkja fuq in- new Site link. Dan se jiftaħ il -Propjetajiet tas-Sit Ġdid . Dan il-proġett se jkun iddisinjat għal applikazzjoni ta 'desktop u tista' tagħżel fil-menu pop-down tal- Layout Inizjali . Tista 'wkoll issettja l-valuri għan-numru ta' Kolonni, Wisa 'tal-kanal, Marġini, u Padding. F'dan il-każ, ma konniex inkwetati ħażin ma 'dan u sempliċement għafast OK .

02 ta '07

Format il-Paġna

Meta ssettja l-proprjetajiet tas-sit u kklikkja OK intom ittieħdu għal dak li jissejjaħ Pjan ta ' vista. Hemm Home page fil-parti ta 'fuq u Master Page fil-qiegħ tat-tieqa. Aħna meħtieġa biss paġna waħda. Biex tasal għal Design View, għamilna double-clicked il-Paġna Home li fetaħ l-interface.

Fuq ix-xellug hemm ftit għodda bażiċi u fuq il-lemin hemm varjetà ta 'pannelli użati biex jimmanipulaw il-kontenut fuq il-paġna. Tul il-quċċata huma l-proprjetajiet, li jistgħu jiġu applikati għall-paġna, jew kull ħaġa magħżula fuq il-paġna. F'dan il-każ, ridna li jkollna sfond iswed. Biex twettaq dan, aħna ikklikkja fuq iċ-ċippa tal-kulur tal- Browser Fill u għażel iswed mill-Picker tal-Kulur.

03 ta '07

Żid it-Test mal-Paġna

Il-pass li jmiss huwa li żżid xi test mal-paġna. Aħna għażilna l- Għodda tat-Test u ħejt kaxxa ta 'test. Iddaħħal il-kelma "Merħba" u, fil-Properties stabbilixxa t-test lil Arial, 120 pixels White. Ċentru allinjat.

Aħna mbagħad qalbu għall-għodda tal-Għażla, għafast fuq il-Kaxxa tal-Kaxxa u stabbilixxiet il- pożizzjoni Y tagħha sa 168 pixels mill-quċċata. Bil-kaxxa tat-test għadha magħżula, aħna fetħet il- pannell tal-Allinja u allineja l-kaxxa tat-testa maċ-ċentru.

Fl-aħħarnett, bil-kaxxa ta 'test magħżula, żamm il- buttuni Għażla / Alt u Shift u għamel erba' kopji tal-kaxxa tat-test. Biddilna t-test u l-pożizzjoni Y ta 'kull kopja lil:

Tinduna, kif issettja l-post ta 'kull kaxxa tat-test, il-paġna terġa' titqajjem biex takkomoda l-post tat-test.

04 ta '07

Żid Image Kollokaturisti

Il-pass li jmiss huwa li tpoġġi stampi bejn il-blokki tat-test.

L-ewwel pass huwa li tagħżel l- Għodda tar-Rettangolu u tiġbed kaxxa tagħna li tinfirex minn naħa waħda tal-paġna għall-oħra. Bir-rettangolu magħżul, waqqafna l- għoli tiegħu għal 250 pixel u l- pożizzjoni Y tiegħu għal 425 pixel . Il-pjan huwa li jġiegħelhom dejjem jespandu jew jikkuntrattaw mal-wisa 'tal-paġna biex jakkomodaw viewport tal-browser ta' l-utent. Biex twettaq dan, aħna għafast il-buttuna ta ' 100% wisa' fil-Properties. X'jagħmel dan huwa griż barra l-valur X u biex jiżgura li l-immaġni tkun dejjem 100% tal-wisa 'tal-viżjoni fil-browser.

05 ta '07

Żid Immaġini fuq il-Postcards tal-Image

Bir-Rettangolu magħżul aħna għafast il- link Imla - mhux il-Kulur Chip - u għafast il- linka I mage biex iżżid immaġini fir-rettangolu. Fil-qasam tat- Twaħħil , għażilna Scale To Fit u għafast il- manku taċ - ċentru fiż-Żona tal- Pożizzjoni biex niżgura li l-immaġini titkejjel miċ-ċentru tal-immaġini.

Sussegwentement, użajna l- Għażla / Alt-Shift-drag technique biex tinħoloq kopja tad-dehra bejn l-ewwel żewġ blokki ta 'test, fetħet il-Bord tal-Mili u bdiet l-immaġni għal ieħor. Għamilna dan għaż-żewġ immaġini li fadal ukoll.

B'immaġini fil-post, wasal iż-żmien li żżid il-mozzjoni.

06 ta '07

Żid Parallax Scrolling

Hemm numru ta 'modi biex tiżdied il-scrolling tal-parallax fil-Adobe Muse. Aħna ser nuruk mod sempliċi kif nagħmilha.

Bil-Fill panel miftuħ, ikklikkja l- tab Skrollja u, meta tinfetaħ, ikklikkja l- kaxxa tal-Mozzjoni .

Se tara l-valuri għall -Mozzjoni Inizjali u Finali . Dawn jiddeterminaw kif fast l-immaġini jiċċaqlaq fir-rigward tar-rota Skrollja. Per eżempju, valur ta '1.5 jmexxi l-immaġni 1.5 darbiet aktar mgħaġġla mir-rota. Aħna użajna valur ta '0 biex tissakkar l-immaġini fil-post.

Il- vleġeġ Orizzontali u Vertikali jiddeterminaw id-direzzjoni tal-mozzjoni. Jekk il-valuri huma 0, l-istampi mhux se jirrestrinġu irrispettivament minn liema vleġġa tikklikkja.

Il-valur tan-nofs - Pożizzjoni Ewlenija - turi l-punt fejn l-immaġini jibdew jiċċaqalqu. Il-linja fuq l-immaġni tibda, għal din id-dehra, 325 pixels mill-quċċata tal-paġna. Meta l-iskroll jilħaq dak il-valur l-immaġini jibda jiċċaqlaq. Tista 'tibdel dan il-valur billi tibdelha fil-kaxxa ta' dialog jew billi tikklikkja u ttella 'l-punt fuq in-naħa ta' fuq tal-linja jew 'l fuq jew' l isfel.

Irrepeti dan għall-istampi l-oħra fuq il-paġna.

07 ta '07

Test tal-Browser

Fuq dan il-punt, konna lesti. L-ewwel ħaġa li għamilna, għal raġunijiet ovvji, kienet li tagħżel File> Save Site . Għat-test tal-brawżer, aħna sempliċement għażilt File> Preview Page in Browser . Dan fetaħ il-brawżer default tal-kompjuter tagħna u, meta nfetħet il-paġna, bdejna scrolling.