Ena izmed "najbolj vročih" tehnik na spletu danes je paralakalno pomikanje. Vsi smo bili na tistih mestih, na katerih vrtite kolesce za pomikanje na miški, vsebina na strani pa se premika navzgor ali navzdol ali čez stran, ko zavrtite kolesce miške.
Za tiste nove, ki se nanašajo na spletno oblikovanje in grafično oblikovanje, je to tehniko izjemno težko doseči zaradi količine potrebnega CSS.
Če vas to opisuje, obstaja veliko aplikacij, ki se lahko pritožijo samo grafičnim izvajalcem. V bistvu uporabljajo znani način postavitve strani na spletne strani, kar pomeni, da ni veliko, če sploh, kodiranje. Ena aplikacija, ki je resnično uveljavljena, je Adobe Muse.
Delo, ki ga opravljajo grafični profesionalci z uporabo Musea, je precej neverjetno, zato si lahko ogledate vzorce, kaj lahko storite z obiskom mesta Musea dneva . Čeprav spletni strokovnjaki menijo, da je Muse nekakšna "vetrna igrača", jo oblikovalci uporabljajo tudi za ustvarjanje mobilnih in spletnih prototipov, ki bodo sčasoma izročili razvijalcem v svoji ekipi.
Ena tehnika, ki je izjemno enostavna za izvedbo z Museom je paralakalno pomikanje in, če želite videti izpolnjeno različico vaje, bomo šli skozi, usmerite brskalnik na to stran. Ko zavrtite kolesce za pomikanje miške, se zdi, da se besedilo premakne navzgor ali navzdol po strani in se slike spremenijo.
Začnimo.
01 od 07
Ustvarite spletno stran
Ko zaženete Muse, kliknite povezavo Novo spletno mesto . To bo odprlo lastnosti novega spletnega mesta . Ta projekt bo zasnovan za namizno aplikacijo in ga lahko izberete v spustnem meniju Initial Layout . Vrednosti lahko nastavite tudi za število stolpcev, širine žleba, robov in oblog. V tem primeru nas nismo užalokrat zaskrbljeni in preprosto kliknili OK .
02 od 07
Oblikujte stran
Ko nastavite lastnosti spletnega mesta in kliknete OK, ste bili sprejeti v tisto, kar se imenuje pogled na načrt . Na vrhu je glavna stran in glavna stran na dnu okna. Potrebovali smo samo eno stran. Da bi prišli do Design View, smo dvokliknite na domačo stran, ki je odprla vmesnik.
Na levi strani je nekaj osnovnih orodij in na desni strani so različne plošče za manipuliranje vsebine na strani. Na vrhu so lastnosti, ki se lahko uporabijo na strani ali kaj drugega, ki je izbrano na strani. V tem primeru smo želeli imeti črno ozadje. Da bi to dosegli, kliknemo na barvni čip Browser Fill in izberemo črno iz Color Pickerja.
03 od 07
Dodaj besedilo na stran
Naslednji korak je dodati nekaj besedila na stran. Izbrali smo orodje za besedilo in izvlečili besedilno polje. Vnesli smo besedo "Dobrodošli" in v nastavitvi Properties nastavili besedilo na Arial, 120 slikovnih pik Bele. Center poravnani.
Nato smo preklopili na orodje za izbiro, kliknili na polje z besedilom in postavili položaj Y na 168 slikovnih pik z vrha. Z izbrano besedilno polje smo odprli ploščo Poravnaj in poravnali besedilno polje z središčem.
Nazadnje, z izbranim besedilnim poljem smo držali tipke Option / Alt in Shift ter naredili štiri kopije besedilnega polja. Besedilo in položaj Y vsake kopije smo spremenili na:
- Do, 871
- Grafika, 1621
- Programska oprema, 2371
- @ About.com, 3181
Ko boste določili lokacijo vsakega besedilnega polja, boste opazili, da se stran prilagodi glede na lokacijo besedila.
04 od 07
Dodajanje podobe slik
Naslednji korak je ustvarjanje slik med besedilnimi bloki.
Prvi korak je, da izberete orodje Rectangle in narišite polje, ki se razteza z ene strani strani na drugo. S pravokotnikom, ki smo jo izbrali, smo postavili višino na 250 slikovnih pik in položaj Y na 425 slikovnih pik . Načrt je, da se vedno raztezajo ali se strinjajo s širino strani, da se prilagodi uporabniški pogled v brskalniku. Da bi to dosegli, smo v Properties (Lastnosti) kliknili gumb 100% širine . Kaj to naredi je siva iz vrednosti X in zagotovite, da je slika vedno 100% širine pogleda v brskalniku.
05 od 07
Dodaj slike v podobe slikalcev
Z izbranim pravokotnikom smo kliknili povezavo Izpolnite - ne Color Chip - in kliknili črnilo I mage, da dodate sliko v pravokotnik. V območju Fitting smo izbrali Scale To Fit in sredinsko ročico kliknili na območju Position , da bi zagotovili, da se slika pomanjša od središča slike.
Nato smo uporabili tehniko Option / Alt-Shift-drag , da ustvarimo kopijo slike med prvima dvema besedilnima blokoma, odpremo ploščo Fill in zamenjamo sliko za drugo. To smo storili tudi za preostale dve sliki.
S slikami na mestu je čas, da dodate gibanje.
06 od 07
Dodaj Parallax pomikanje
Obstaja več načinov dodajanja paralakse v Adobe Museu. Pokazali vam bomo preprost način za to.
Ko je plošča za polnjenje odprta, kliknite zavihek Scroll in, ko se odpre, kliknite potrditveno polje Promeni .
Boste videli vrednosti za začetno in končno gibanje . Ti določajo, kako hitro se premika slika glede na kolesce za drsenje. Na primer, vrednost 1,5 premakne sliko 1,5-krat hitreje kot kolo. Uporabili smo vrednost 0 za zaklepanje slik na mestu.
Horizontalne in vertikalne puščice določajo smer gibanja. Če so vrednosti 0, se slike ne premaknejo ne glede na to, s katero puščico kliknete.
Srednja vrednost - Ključni položaj - prikazuje točko, kjer se slike začnejo premikati. Črta nad sliko se začne za to sliko 325 vrst od vrha strani. Ko drsnik doseže to vrednost, se slika začne premikati. To vrednost lahko spremenite tako, da jo spremenite v pogovornem oknu ali tako, da kliknete in povlečete točko na vrhu črte bodisi gor ali dol.
Ponovite to za druge slike na strani.
07 od 07
Preskus brskalnika
Na tej točki smo bili končani. Najprej smo zaradi očitnih razlogov izbrali Datoteka> Shrani spletno mesto . V preizkus brskalnika smo preprosto izbrali File> Preview Page v brskalniku . To je odprlo privzeti brskalnik našega računalnika in ko se je stran odprla, smo začeli pomikati.