Usa sa mga "labing mainit" nga mga pamaagi sa web karon mao ang pag-scroll sa paralaks. Nahimo kaming tanan sa mga lugar nga imong gilay-on ang scroll wheel sa imong mouse ug ang sulod sa panid mobalhin ug paubos sa pahina samtang imong gilibot ang mouse wheel.
Para sa mga bag-o sa web design ug graphic design, kini nga teknik mahimong hilabihan lisud nga makab-ot tungod sa kantidad sa CSS nga gikinahanglan.
Kon kana naghulagway kanimo, adunay daghang mga aplikasyon nga mahimo lamang makadani sa mga graphic artist. Sila naggamit sa usa ka pamilyar nga pamaagi sa paghan-ay sa panid sa mga panid sa web, nga nagpasabot nga dili daghan, kon aduna man, ang paglambigit mahilambigit. Ang usa ka aplikasyon nga tinuod nga nagpasiugda sa prominence mao ang Adobe Muse.
Ang buluhaton nga gihimo sa mga graphic pros nga gamit ang Muse talagsaon kaayo ug makita nimo ang sampol sa unsay imong mahimo pinaagi sa pagbisita sa Muse Site sa Ang Adlaw . Bisan tuod ang web pros adunay pagtagad sa Muse isip usa ka matang sa "wind-up toy", gigamit usab kini sa mga tigdesinyo sa paghimo sa mga mobile ug web prototypes nga sa ngadto-ngadto ipasa ngadto sa mga developers sa ilang team.
Ang usa ka teknik nga sayon kaayo nga matuman uban sa Muse mao ang scrolling parallax ug, kung gusto nimo makita ang nakompleto nga bersyon sa ehersisyo Maglakaw kami, itudlo ang imong browser niini nga panid. Kon imong palihokon ang ligid sa scroll sa imong mouse, ang teksto daw nagpataas o nagpaubos sa panid ug ang mga hulagway nausab.
Magsugod na ta.
01 sa 07
Paghimo og Web Page
Sa diha nga ikaw maglunsad sa Muse i-klik ang link sa New Site . Kini magbukas sa New Site Properties . Kini nga proyekto gidisenyo alang sa usa ka desktop application ug mahimo nimo kini pilion sa pop-down menu sa Initial Layout . Mahimo usab nimong ibutang ang mga mithi alang sa gidaghanon sa mga Kolom, Gutter Width, Margins, ug Padding. Niini nga kaso, dili kaayo kami nabalaka niini ug yanong nag-klik OK .
02 sa 07
Pag-format sa Pahina
Sa diha nga imong gibutang ang mga kabtangan sa site ug gi-klik OK ikaw gidala ngadto sa unsay gitawag nga pagtan-aw sa Plano . Adunay usa ka Home page sa ibabaw ug usa ka Master Page sa ubos sa bintana. Gikinahanglan lamang nato ang usa ka panid. Aron makaadto sa Design View, kami doble-klik ang Home page nga nagbukas sa interface.
Diha sa wala ang pipila ka mga sukaranan nga mga himan ug sa tuo mao ang nagkalainlaing mga panel nga gigamit sa pagmanipula sa sulod sa panid. Uban sa ibabaw mao ang mga kabtangan, nga mahimong magamit sa panid, o bisan unsang butang nga napili sa panid. Sa kini nga kaso, gusto namon nga adunay usa ka itom nga background. Aron mahimo kini, mag-klik kami sa kolor sa kolor sa Browser Fill ug mipili nga itom gikan sa Color Picker.
03 of 07
Idugang ang Teksto sa Pahina
Ang sunod nga lakang mao ang pagdugang sa pipila ka teksto sa panid. Among gipili ang Text Tool ug gibitad ang usa ka text box. Gisulod namo ang pulong nga "Welcome" ug, diha sa mga Properties gipahimutang ang teksto sa Arial, 120 ka pixel White. Gipunting ang Center.
Dayon mibalhin kami sa Selection tool, nag-klik sa Textbox ug gipahimutang ang Y nga posisyon nga 168 ka pixel gikan sa ibabaw. Uban sa gipili nga kahon nga teksto, gibuksan namo ang Align panel ug giparis ang kahon sa text ngadto sa center.
Sa katapusan, sa gipili nga kahon sa teksto, gipugngan namo ang Option / Alt ug Shift nga mga yawe ug naghimo sa upat ka mga kopya sa text box. Giusab ang teksto ug ang posisyon sa Y sa matag kopya sa:
- Ngadto, 871
- Graphics, 1621
- Software, 2371
- @ About.com, 3181
Mamatikdan nimo, samtang imong gipahimutang ang nahimutangan sa matag kahon sa teksto, ang panid nagkalainlain aron ma-accommodate ang nahimutangan sa teksto.
04 sa 07
Idugang ang Mga Placeholder sa Imahe
Ang sunod nga lakang mao ang pagbutang sa mga hulagway tali sa mga bloke sa teksto.
Ang unang lakang mao ang pagpili sa Rectangle Tool ug pagdibuho sa atong usa ka kahon nga moabot gikan sa usa ka bahin sa panid ngadto sa pikas. Sa gipili nga rektanggulo, gipahimutang ang gitas-on niini ngadto sa 250 ka pikas ug ang posisyon ni Y sa 425 ka pixel . Ang plano mao ang pag-aghat kanila kanunay o pagkontrata sa lapad nga panid aron ma-accommodate ang browser viewport sa user. Aron mahimo kini, kami nag-klik sa 100% width button sa Properties. Ang nahimo niini mao ang abohon sa bili sa X ug aron maseguro nga ang imahe kanunay nga 100% sa width viewport sa usa ka browser.
05 sa 07
Pagdugang og mga Imahen sa Mga Placeholder sa Imahe
Uban sa Rectangle nga gipili kami nag-klik sa Fill link - dili ang Color Chip - ug gikuha ang tinta sa mage aron idugang ang usa ka imahen sa rectangle. Sa angay nga lugar, gipili ang Scale To Fit ug gikuha ang center handle sa posisyon nga Position aron maseguro nga ang imahe gikan sa sentro sa imahe.
Sunod, among gigamit ang teknik sa Option / Alt-Shift-drag aron paghimo og usa ka kopya sa hulagway sa tunga sa unang duha ka mga bloke nga teksto, gibuksan ang Fill panel ug gipalit ang imahe alang sa lain. Gibuhat usab namo kini alang sa nahibiling duha ka mga larawan.
Uban sa mga imahen sa dapit, kini ang panahon sa pagdugang sa paglihok.
06 sa 07
Idugang ang Pag-scroll sa Parallax
Adunay daghang mga paagi sa pagdugang sa parallax scrolling sa Adobe Muse. Gipakita namon kanimo ang yanong paagi sa pagbuhat niini.
Uban sa Fill panel nga bukas, i-klik ang Scroll tab ug, sa diha nga kini gibuksan, i-klik ang Motion checkbox .
Makita nimo ang mga mithi alang sa Initial ug Final Motion . Gitino niini ang paspas nga paglihok sa imahe kalabot sa Scroll Wheel. Pananglitan, ang usa ka bili nga 1.5 mag-aghat sa imahe nga 1.5 ka beses nga mas paspas kay sa ligid. Gigamit namon ang usa ka kantidad nga 0 aron i-lock ang mga imahen sa dapit.
Ang Horizontal ug Vertical nga mga udyong nagtino sa direksyon sa paglihok. Kung ang mga hiyas mao ang 0 ang mga hulagway dili molihok bisag asa nga pana nga imong i-klik.
Ang tunga nga bili- Key Position - nagpakita sa punto diin ang mga imahen magsugod sa paglihok. Ang linya sa ibabaw sa imahen magsugod, alang sa maong larawan, 325 ka pixel gikan sa ibabaw sa panid. Sa diha nga ang linukot nga maabot nga ang bili ang imahe magsugod sa paglihok. Mahimo nimo kining usbon pinaagi sa pag-usab sa kini nga kahon sa dialogo o pinaagi sa pag-klik ug pag-drag sa punto sa ibabaw sa linya bisan pataas o paubos.
Balika kini alang sa ubang mga hulagway sa panid.
07 of 07
Test sa Browser
Niining puntoha, nahuman kami. Ang unang butang nga atong gibuhat, tungod sa klaro nga mga rason, mao ang pagpili sa File> Save Site . Sa pagsulay sa browser, gipili lang namo ang File> Preview Page sa Browser . Kini nagbukas sa default browser sa atong computer ug, sa dihang gibuksan ang pahina, nagsugod kami sa pag-scroll.