Veebisaidi üks kuumimatest tehnikatest on parallaxi kerimine. Me kõik oleme olnud nendes kohtades, kus te pöörake hiirel kerimisratast ja lehe sisu liigub üles ja alla või lehega, kui pöörate hiire ratast.
Uute veebidisaini ja graafilise disaini jaoks on seda tehnikat võimalik üsna raske saavutada vajaliku CSSi tõttu.
Kui see kirjeldab teid, on mitmeid rakendusi, mis võivad vaid graafikaartistidele edasi kaevata. Nad kasutavad peamiselt veebisaitidele tuttavat lehekülje paigutuse lähenemisviisi, mis tähendab, et see ei ole palju, kui üldse, kodeerimine on seotud. Üks rakendus, mis tõesti tõusnud esile on Adobe Muse.
Muse graafikatöötlejate poolt tehtud töö on üsna hämmastav ja näete proovitüki sellest, mida saate teha, külastades Muse Site of The Day . Kuigi veebipildid peidavad Mustat kui mingisugust "jõuallikaks mänguasja", kasutatakse seda ka disainerite poolt mobiili- ja veebiprotokumentide loomiseks, mis antakse lõpuks oma meeskonna arendajatele.
Üks meetod, mida on Muse'iga väga lihtne saavutada, on parallaxi kerimine ja kui soovite näha teostatud versiooni, siis käime läbi, suunake oma brauser sellele lehele. Kui liigutate hiire kerimisratast, tundub see, et tekst liigub lehel ülespoole või allapoole ja pildid muutuvad.
Alustame.
01 07
Veebilehe loomine
Muse käivitamisel klõpsake linki Uus sait . See avab uue saidi atribuutide . See projekt on mõeldud töölauarakenduseks ja selle saate valida rippmenüüst Esialgne paigutus . Võite määrata ka veerude, lainetuse laiuse, veeriste ja padindide arvu väärtused. Sel juhul ei olnud me seda väga huvitatud ja lihtsalt klõpsanud OK .
02 of 07
Lehe vormindamine
Kui olete määranud saidi omadused ja klõpsanud nupul OK, siis viidi see, mida nimetatakse plaani vaateks. Ülaosas on avaleht ja akna allosas põhileht. Me vajame ainult ühte lehte. Disainivaate saamiseks klikkisime topeltklõpsuga sellel lehel, kus kasutajaliidese avas.
Vasakul on mõned põhilised tööriistad ja paremal on erinevad paneelid, mida kasutatakse lehel oleva sisuga manipuleerimiseks. Ülaosas on omadused, mida saab lehele rakendada, või lehel valitavad omadused. Sellisel juhul tahtisime olla mustal taustal. Selle saavutamiseks klõpsame värvilahtmel Browser Fill ja valisime Color Pickerilt mustast värvi.
03 07
Lisa tekst lehele
Järgmine samm on lisada mõni tekst lehele. Valisime teksti tööriista ja tõmbasime tekstikasti. Me sisestasime sõna "Tere tulemast" ja valisime atribuutides teksti Arialile 120 pikslit valge. Keskjoondatud.
Seejärel lülitasime valiku tööriista, klõpsasime tekstikasti ja seadisime Y-positsiooni ülevalt 168 pikslit. Valides tekstiväljale, avasime paneeli Joonda ja joondasime tekstikasti keskpunkti.
Lõpuks, valides tekstikasti, hoidisime valikuvõimaluste / alt ja klahvi Shift all ja tegime neli tekstikasti koopiat. Muutsime iga koopia teksti ja Y-positsiooni järgmiselt:
- Et, 871
- Graafika, 1621
- Tarkvara, 2371
- @ About.com, 3181
Märkate, et iga tekstiboksi asukoha määramisel on lehe suurus väiksem, et kohandada teksti asukohta.
04 07
Lisage piltide kohanäitajaid
Järgmine samm on teha pilte tekstiblokkide vahel.
Esimene samm on valida ristküliku tööriist ja juhtida meie kasti, mis ulatub lehe ühelt küljelt teisele. Valitud ristküliku puhul seadisime selle kõrguse 250 pikslini ja selle Y-positsiooni 425 pikslini . Kava eesmärk on, et need laiendaksid või leppiksid kokku lehe laiusega, et mahutada kasutaja brauseri vaateporti. Selle saavutamiseks klõpsasime atribuutides 100% laiuse nupu. Mida see teeb, on X-väärtus tühjaks ja tagab, et pilt on brauseris alati 100% vaateava laiusest.
05 07
Lisage pilte pildi kohanäitajate jaoks
Valides ristküliku, vaatasime klõpsuga nupule Täida - mitte värviline kiip - ja klõpsasime I mage tindi, et lisada ristkülikus pilt. Fitting piirkonnas valisime Scale Fit Fit ja klikkisime positsiooni alal paikneva keskmise käepidemega , et pilt oleks skaala keskmest korrastatud.
Järgmisena kasutasime Option / Alt-Shift-drag tehnikat, et luua kujutiste koopia kahe esimese teksti ploki vahel, avas Fill paneeli ja vahetas pilti teisele. Tegime seda ka kahe ülejäänud pildi jaoks.
Kui pildid on paigas, on aeg liikuda.
06 07
Lisa Parallaxi kerimine
Adobe Muse'is on parallaksi kerimise abil mitmeid viise. Me näeme teile lihtsat viisi seda teha.
Kui Fill paneel on avatud, klõpsake vahekaarti Sirvimine ja avage siis ruut Liikumine .
Näete esialgse ja lõppseisundi väärtusi. Need määravad, kui kiiresti pilt liigub kerimisrattal. Näiteks väärtus 1.5 muudab pildi 1,5 korda kiiremini kui rattaga. Me kasutasime väärtuse 0, et pilte lukustada.
Horisontaalsed ja vertikaalsed nooled määravad liikumise suuna. Kui väärtused on 0, ei lähe kujutised kaugemale sellest, millist noolt te klõpsate.
Keskmine väärtus - võtmeisukoht - näitab koha, kus pildid hakkavad liikuma. Pilti pildi kohal algab selle pildi puhul 325 pikslit lehe ülaosast. Kui kerimisriba jõuab selle väärtuseni, hakkab pilt liikuma. Saate seda väärtust muuta, kas seda muuta dialoogiboksis või klõpsates ja lohistades rea ülaosas olevat punkti üles või alla.
Korda seda teiste lehe piltide puhul.
07 07
Brauseri test
Sel hetkel oleme lõpetanud. Esimene asi, mida me ilmselgelt tegime, oli valida File> Save Site . Brauseri testimiseks valisime lihtsalt brauseris faili> eelvaate leht . See avas meie arvuti vaikebrauseriks ja lehe avamisel alustasime kerimisega.