Sut i Greu Parallax Scrolling Gan ddefnyddio Adobe Muse

Un o'r technegau "poethaf" ar y we heddiw yw sgrolio parallax. Rydym i gyd wedi bod i'r safleoedd hynny lle byddwch chi'n cylchdroi'r olwyn sgrolio ar eich llygoden ac mae'r cynnwys ar y dudalen yn symud i fyny ac i lawr neu ar draws y dudalen wrth i chi gylchdroi'r olwynion llygoden.

Ar gyfer y rhai newydd i ddylunio gwe a dylunio graffig, gall y dechneg hon fod yn hynod anodd i'w gyflawni oherwydd y swm o CSS sydd ei angen.

Os yw hynny'n eich disgrifio, mae yna nifer o geisiadau a all apelio at artistiaid graff. Yn y bôn, defnyddiant ymagwedd cynllun tudalen gyfarwydd at dudalennau gwe, sy'n golygu nad oes llawer o godau, os o gwbl, yn gysylltiedig. Mae un cais sydd wedi crwydro i amlygrwydd mewn gwirionedd yn Adobe Muse.

Mae'r gwaith sy'n cael ei wneud gan brosiectau graffeg yn defnyddio Muse yn eithaf anhygoel a gallwch weld samplu beth allwch chi ei wneud trwy ymweld â Safle'r Diwrnod Muse. Er bod manteision gwe yn tueddu i ystyried bod Muse yn rhyw fath o "deganau gwynt", mae dylunwyr hefyd yn cael eu defnyddio i greu prototeipiau symudol a gwe a gaiff eu trosglwyddo i'r datblygwyr ar eu tîm yn y pen draw.

Un dechneg sy'n hynod o hawdd i'w gyflawni gyda Muse yw sgrolio parallax ac, os ydych chi am weld y fersiwn wedi'i gwblhau o'r ymarfer Byddwn yn cerdded drwodd, rhowch bwynt ar eich porwr i'r dudalen hon. Pan fyddwch chi'n rhedeg olwyn sgrolio eich llygoden, mae'n ymddangos bod y testun yn symud i fyny neu i lawr y dudalen ac mae'r delweddau'n newid.

Gadewch i ni ddechrau.

01 o 07

Creu Tudalen We

Pan fyddwch yn lansio Muse cliciwch ar y ddolen Safle Newydd . Bydd hyn yn agor Eiddo'r Safle Newydd . Bydd y prosiect hwn wedi'i gynllunio ar gyfer cais bwrdd gwaith a gallwch ei ddewis yn y ddewislen Cynllun Cychwynnol poblogaidd. Gallwch hefyd osod y gwerthoedd ar gyfer nifer y Colofnau, Y Lled Gwanith, y Margins, a'r Padio. Yn yr achos hwn, nid oeddem yn hynod bryderus ynglŷn â hyn a chlicio OK yn syml.

02 o 07

Fformat y Tudalen

Pan osodasoch eiddo'r safle a chlicio yn OK fe'ch cymerwyd â'r hyn a elwir yn Golwg y Cynllun . Mae tudalen Cartref ar y brig a Meistr Tudalen ar waelod y ffenestr. Dim ond un dudalen oedd ei angen arnom. I gyrraedd Design View, fe wnaethom ddwbl-glicio'r dudalen Cartref a agorodd y rhyngwyneb.

Ar y chwith mae ychydig o offer sylfaenol ac ar y dde mae amrywiaeth o baneli a ddefnyddir i drin y cynnwys ar y dudalen. Ar hyd y brig mae'r eiddo, y gellir eu cymhwyso i'r dudalen, neu unrhyw beth a ddewisir ar y dudalen. Yn yr achos hwn, roeddem eisiau cael cefndir du. Er mwyn cyflawni hyn, rydym yn clicio ar sglodion lliw Llenw'r Porwr a dewiswch ddu o'r Picker Lliw.

03 o 07

Ychwanegu Testun i'r Tudalen

Y cam nesaf yw ychwanegu peth testun i'r dudalen. Dewisom yr Offeryn Testun a dynnodd blychau testun. Fe wnaethom gofnodi'r gair "Croeso" ac, yn yr Eiddo, gosodwch y testun i Arial, 120 picsel Gwyn. Alinio'r Ganolfan.

Yna, fe wnaethom ni droi at yr offeryn Dewis, clicio ar y Blychau Testun a gosod ei safle Y i 168 picsel o'r brig. Gyda'r blwch testun yn dal i gael ei ddewis, fe wnaethom agor y panel Alinio ac alinio'r blwch testun i'r ganolfan.

Yn olaf, gyda'r blwch testun a ddewiswyd, cawsom ni lawr y bysellau Opsiwn / Alt a Shift a gwnaethom bedwar copi o'r blwch testun. Fe wnaethom newid y testun a sefyllfa Y pob copi i:

Byddwch yn sylwi, wrth i chi osod lleoliad pob blwch testun, mae'r dudalen yn newid i gynnwys lleoliad y testun.

04 o 07

Ychwanegu Deiliaid Swyddi

Y cam nesaf yw rhoi delweddau rhwng y blociau testun.

Y cam cyntaf yw dewis yr Offeryn Rectangle a thynnu ein bocs sy'n ymestyn o un ochr i'r dudalen i'r llall. Gyda'r petryal a ddewiswyd, gosodwyd ei uchder i 250 picsel a'i safle Y i 425 picsel . Y cynllun yw eu bod bob amser yn ymestyn neu'n gontractio i led y dudalen i ddarparu ar gyfer porwr porwr defnyddiwr. I gyflawni hyn, gwnaethom glicio ar y botwm lled 100% yn yr Eiddo. Yr hyn sy'n digwydd yw llwyd allan y gwerth X ac i sicrhau bod y ddelwedd bob amser yn 100% o led lled y port yn porwr.

05 o 07

Ychwanegu Delweddau i Ddeiliaid Swyddi

Gyda'r Rectangle a ddewiswyd, fe wnaethom glicio ar y llenwi Llenwch - nid y Lliw Chip - a chlicio ar yr inc mewyllo i i ychwanegu delwedd yn y petryal. Yn yr ardal Gosod , dewiswyd Scale To Fit a chlicio ar y driniaeth ganolfan yn ardal y Sefyllfa i sicrhau bod y ddelwedd wedi'i raddio o ganol y ddelwedd.

Nesaf, defnyddiasom y dechneg Opsiwn / Alt-Shift-llusgo i greu copi o'r ddelwedd rhwng y ddau floc testun cyntaf, agorodd y Panel Llenwi a chyfnewid y ddelwedd ar gyfer un arall. Gwnaethom hyn hefyd ar gyfer y ddau ddelwedd arall.

Gyda delweddau yn eu lle, mae'n bryd i chi ychwanegu'r cynnig.

06 o 07

Ychwanegwch Parallax Scrolling

Mae nifer o ffyrdd o ychwanegu sgrolio parallax yn Adobe Muse. Byddwn am ddangos i chi ffordd syml o wneud hynny.

Gyda'r panel Llenwi ar agor, cliciwch ar y tab Scroll a, pan fydd yn agor, cliciwch ar y blwch gwirio Cynnig .

Fe welwch werthoedd ar gyfer Cynnig Cychwynnol a Terfynol . Mae'r rhain yn pennu pa mor gyflym y mae'r delwedd yn symud mewn perthynas â'r Olwyn Sgrolio. Er enghraifft, bydd gwerth 1.5 yn symud y ddelwedd 1.5 gwaith yn gyflymach na'r olwyn. Defnyddiasom werth o 0 i gloi'r delweddau yn eu lle.

Mae'r saethau llorweddol a fertigol yn pennu cyfeiriad y cynnig. Os yw'r gwerthoedd yn 0, ni fydd y delweddau yn parchu pa mor saeth yr ydych chi'n ei glicio.

Y gwerth canol - Sefyllfa Allweddol - yn dangos y pwynt lle mae'r delweddau'n dechrau symud. Mae'r llinell uwchben y ddelwedd yn cychwyn, ar gyfer y ddelwedd hon, 325 picsel o frig y dudalen. Pan fydd y sgrôl yn cyrraedd y gwerth, mae'r ddelwedd yn dechrau symud. Gallwch newid y gwerth hwn naill ai'n ei newid yn y blwch deialog neu drwy glicio a llusgo'r pwynt ar frig y llinell naill ai i fyny neu i lawr.

Ailadroddwch hyn ar gyfer y delweddau eraill ar y dudalen.

07 o 07

Prawf Porwr

Ar y pwynt hwn, cawsom ni orffen. Y peth cyntaf a wnaethom, am resymau amlwg, oedd dewis File> Save Site . I brawf porwr, dewiswn Ffeil> Tudalen Rhagolwg yn y Porwr . Agorodd borwr diofyn ein cyfrifiadur a, pan agorodd y dudalen, dechreuon ni sgrolio.