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 medyo kahanga-hanga at maaari mong makita ang isang sampling ng kung ano ang maaari mong gawin sa pamamagitan ng pagbisita sa Muse Site of The Day . 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 nais mong makita ang nakumpletong bersyon ng ehersisyo. 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 07Gumawa ng Web Page
Kapag inilunsad mo ang Muse i-click ang Bagong Site link. Bubuksan nito ang Bagong Site Properties. Ang proyektong ito ay dinisenyo para sa isang desktop application at maaari mo itong piliin sa Paunang Layout pop-down na menu. 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 na-click lamang OK.
I-format ang Pahina
Kapag itinakda mo ang mga site properties at nag-click OK ikaw ay kinuha sa tinatawag Magplano tingnan. Meron isang Bahay pahina sa itaas at a 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 magawa ito, mag-click kami sa Punan ang Browser color chip at pinili ang itim mula sa Picker ng Kulay.
03 ng 07Magdagdag ng Teksto sa Pahina
Ang susunod na hakbang ay upang magdagdag ng ilang teksto sa pahina. Pinili namin ang Tool ng Teksto at iginuhit ang isang kahon ng teksto. Ipinasok namin ang salitang "Welcome" at, sa Mga Properties itakda ang teksto sa Arial, 120 pixel White. Ang Aligned Center.
Pagkatapos ay inilipat namin ang tool ng Pinili, nag-click sa Textbox at itinakda Y posisyon sa 168 pixel mula sa itaas. Gamit ang napiling text box, binuksan namin ang Align panel at nakahanay sa kahon ng teksto sa gitna.
Sa wakas, gamit ang kahon ng teksto na napili, aming ginugol ang Pagpipilian / Alt at Shift mga susi at gumawa ng 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
Mapapansin mo, habang itinatakda mo ang lokasyon ng bawat kahon ng teksto, ang resize ng pahina upang mapaunlakan ang lokasyon ng teksto.
04 ng 07Magdagdag 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 kahon na umaabot mula sa isang bahagi ng pahina papunta sa isa pa. Gamit ang rektang napili, itinakda namin nito taas hanggang 250 pixel at nito Y posisyon sa 425 pixels. 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 magawa ito, na-click namin ang 100% na lapad na pindutan 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 07Magdagdag ng mga Imahe sa Mga Placeholder ng Larawan
Gamit ang Rectangle na pinili namin na-click ang Punan ang link - hindi ang Kulay Chip - at nag-click sa akosalamin ng tandang upang magdagdag ng isang imahe sa rektanggulo. Nasa Angkop lugar, napili namin Scale To Fit at na-click ang sentro ng hawakan nasa Posisyon lugar upang matiyak na ang imahe ay naka-scale mula sa gitna ng imahe.
Susunod, ginamit namin ang Pagpipilian / Alt-Shift-drag pamamaraan upang lumikha ng isang kopya ng imahe sa pagitan ng unang dalawang mga bloke ng teksto, binuksan ang panel ng Punan at swapped ang imahe 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 07Magdagdag 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 ng Punan buksan, i-click ang Mag-scroll tab at, kapag nagbukas ito, i-click ang Checkbox ng Paggalaw.
Makikita mo ang mga halaga para sa Paunang at 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 Pahalang at Vertical arrow matukoy ang 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 Posisyon - ay nagpapakita ng punto kung saan ang mga imahe ay nagsisimula 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 07Test ng Browser
Sa puntong ito, tapos na kami. Ang unang bagay na ginawa namin, para sa mga halatang dahilan, ay ang pumili File> I-save ang Site. Para sa pagsubok ng browser, napili lang namin File> Preview Page sa Browser. Binuksan nito ang default na browser ng aming computer at, nang magbukas ang pahina, nagsimula kaming mag-scroll.
