Ang isa sa mga "pinakamainit" na diskarte sa web ngayon ay ang paralaks na pag-scroll. Namin ang lahat sa mga site na iyon kung saan mong i-rotate ang scroll wheel sa iyong mouse at ang nilalaman sa pahina ay gumagalaw pataas at pababa o sa buong pahina habang paikutin mo ang mouse wheel.
Para sa mga bago sa disenyo ng web at graphic na disenyo, ang pamamaraan na ito ay maaaring labis na mahirap makamit dahil sa halaga ng CSS kinakailangan.
Kung naglalarawan sa iyo, mayroong isang bilang ng mga application na maaaring mag-apela lamang sa mga graphic artist. Karaniwang ginagamit nila ang isang pamilyar na layout ng layout ng pahina sa mga pahina ng web, na nangangahulugan na walang maraming, kung mayroon man, ang coding ay kasangkot. Ang isang application na talagang rocketed sa katanyagan ay Adobe Muse.
Ang gawain na ginagawa ng mga graphics na gamit gamit ang Muse ay lubos na kahanga-hangang at maaari mong makita ang isang sampling ng kung ano ang maaari mong gawin sa pamamagitan ng pagbisita sa Muse Site ng Ang Araw . Kahit na ang web pros ay may posibilidad na isipin ang Muse bilang isang uri ng "wind-up toy", ginagamit din ito ng mga designer upang lumikha ng mga mobile at web prototype na kalaunan ay ibibigay sa mga developer sa kanilang koponan.
Ang isang pamamaraan na napakadaling madaling maisagawa sa Muse ay ang pag-scroll sa paralaks at, kung gusto mong makita ang nakumpletong bersyon ng ehersisyo Pupunta kami sa paglakad, ituro ang iyong browser sa pahinang ito. Kapag igulong mo ang scroll wheel ng iyong mouse, ang teksto ay tila lumipat pataas o pababa sa pahina at nagbabago ang mga imahe.
Magsimula na tayo.
01 ng 07
Gumawa ng Web Page
Kapag inilunsad mo ang Muse, i-click ang link ng Bagong Site . Bubuksan nito ang Bagong Site Properties . Ang proyektong ito ay idinisenyo para sa isang desktop application at maaari mo itong piliin sa pop-down na menu ng Initial Layout . Maaari mo ring itakda ang mga halaga para sa bilang ng Mga Haligi, Malapad na Lapad, Mga Margin, at Padding. Sa kasong ito, hindi namin lubusang nababahala ito at simpleng nag-click OK .
02 ng 07
I-format ang Pahina
Kapag itinakda mo ang mga pag-aari ng site at nag-click OK ikaw ay dadalhin sa kung ano ang tinatawag na view ng Plan . May isang Home page sa itaas at isang Master Page sa ilalim ng window. Kailangan lang namin ng isang pahina. Upang makapunta sa Disenyo ng Pag-view, nag-double-click namin ang Home page na nagbukas ng interface.
Sa kaliwa ay ilang mga pangunahing tool at sa kanan ay isang iba't ibang mga panel na ginagamit upang mamanipula ang nilalaman sa pahina. Kasama sa itaas ang mga katangian, na maaaring mailapat sa pahina, o anumang bagay na napili sa pahina. Sa kasong ito, nais naming magkaroon ng itim na background. Upang maisagawa ito, nag-click kami sa Kulay ng Kulay ng Browser fill at pumili ng itim mula sa Color Picker.
03 ng 07
Magdagdag ng Teksto sa Pahina
Ang susunod na hakbang ay upang magdagdag ng ilang teksto sa pahina. Pinili namin ang Text Tool at iginuhit ang isang text box. Ipinasok namin ang salitang "Welcome" at, sa Mga Properties itakda ang teksto kay Arial, 120 pixels White. Ang Aligned Center.
Pagkatapos ay inilipat namin ang tool ng Selection, nag-click sa Textbox at itakda ang posisyon nito Y sa 168 pixel mula sa itaas. Sa napiling pa rin ang kahon ng teksto, binuksan namin ang Align panel at hinahanay ang text box sa center.
Sa wakas, sa napili na kahon ng teksto, hinawakan namin ang mga Pagpipilian / Alt at Shift key at ginawa ang apat na kopya ng kahon ng teksto. Binago namin ang teksto at ang posisyon ng Y sa bawat kopya sa:
- Sa, 871
- Graphics, 1621
- Software, 2371
- @ About.com, 3181
Mapapansin mo, habang itinatakda mo ang lokasyon ng bawat kahon ng teksto, ang resize ng pahina upang mapaunlakan ang lokasyon ng teksto.
04 ng 07
Magdagdag ng Mga Placeholder ng Larawan
Ang susunod na hakbang ay ilagay ang mga larawan sa pagitan ng mga bloke ng teksto.
Ang unang hakbang ay upang piliin ang Rectangle Tool at iguhit ang aming isang kahon na umaabot mula sa isang bahagi ng pahina papunta sa isa pa. Sa piniling rektanggulo, itinakda namin ang taas nito sa 250 pixel at ang posisyon nito sa 425 pixel . Ang plano ay upang palaging mag-abot ang mga ito o kontrata sa lapad ng pahina upang mapaunlakan ang viewport ng browser ng gumagamit. Upang maisagawa ito, na-click namin ang 100% na lapad na buton sa Mga Katangian. Ang ginagawa nito ay kulay abo ang halaga ng X at upang matiyak na ang imahe ay laging 100% ng lapad ng viewport sa isang browser.
05 ng 07
Magdagdag ng mga Imahe sa Mga Placeholder ng Larawan
Gamit ang Rectangle na pinili namin nag-click ang Punan link - hindi ang Kulay Chip - at na-click ang tinta ko salamangkero upang magdagdag ng isang imahe sa rektanggulo. Sa angkop na lugar, pinili namin ang Scale To Fit at nag-click sa center handle sa Position area upang matiyak na ang imahe ay naka-scale mula sa gitna ng imahe.
Susunod, ginamit namin ang pamamaraan ng Pagpipilian / Alt-Shift-drag upang lumikha ng isang kopya ng larawan sa pagitan ng unang dalawang mga bloke ng teksto, binuksan ang panel ng Punan at pinalitan ang larawan para sa isa pa. Ginawa namin ito para sa natitirang dalawang mga larawan pati na rin.
Sa mga larawan sa lugar, oras na upang idagdag ang paggalaw.
06 ng 07
Magdagdag ng Parallax Scrolling
Mayroong ilang mga paraan ng pagdaragdag ng parallax scroll sa Adobe Muse. Ipapakita namin sa iyo ang isang simpleng paraan ng paggawa nito.
Sa panel na Punan bukas, i-click ang tab na Mag - scroll at, kapag bubukas ito, i-click ang checkbox ng Paggalaw .
Makikita mo ang mga halaga para sa Initial and Final Motion . Tinutukoy ng mga ito kung gaano kabilis ang paggalaw ng imahe kaugnay sa Scroll Wheel. Halimbawa, ang isang halaga ng 1.5 ay ilipat ang imahe nang 1.5 beses na mas mabilis kaysa sa gulong. Ginamit namin ang isang halaga ng 0 upang i-lock ang mga larawan sa lugar.
Ang Horizontal at Vertical na arrow ay tumutukoy sa direksyon ng paggalaw. Kung ang mga halaga ay 0 ang mga imahe ay hindi magpapalago ng hindi aling arrow kung saan ka nag-click.
Ang gitnang halaga- Key Position - ay nagpapakita ng punto kung saan nagsisimula ang mga imahe upang ilipat. Nagsisimula ang linya sa itaas ng imahe, para sa larawang ito, 325 pixel mula sa tuktok ng pahina. Kapag naabot ng scroll ang halaga na ang imahe ay nagsisimula upang ilipat. Maaari mong baguhin ang halagang ito sa pamamagitan ng pagbabago ng ito sa dialog box o sa pamamagitan ng pag-click at pag-drag sa punto sa tuktok ng linya alinman pataas o pababa.
Ulitin ito para sa iba pang mga imahe sa pahina.
07 ng 07
Test ng Browser
Sa puntong ito, tapos na kami. Ang unang bagay na ginawa namin, para sa mga halatang kadahilanan, ay upang piliin ang File> Save Site . Sa browser test, napili lang namin ang File> Preview Page sa Browser . Binuksan nito ang default na browser ng aming computer at, nang magbukas ang pahina, nagsimula kaming mag-scroll.