Yksi verkon "kuumin" tekniikoista on parallaalis vieritys. Olemme kaikki olleet niissä sivustoissa, joissa pyörittelet hiiren vierityspyörää ja sivun sisältö liikkuu ylös ja alas tai sivun yläpuolella kiertämällä hiiren rullaa.
Niille uusille web-suunnittelulle ja graafiselle suunnittelulle tämä tekniikka voi olla erittäin vaikea saavuttaa vaaditun CSS-määrän ansiosta.
Jos tämä kuvaa sinut, on olemassa useita sovelluksia, jotka voivat vain vedota graafikoille. He periaatteessa käyttävät tuttua sivuasettelu lähestymistapaa verkkosivuja, mikä tarkoittaa, että ei ole paljon, jos mitään, koodaus on mukana. Yksi hakemus, joka on todella rakastunut tärkeysjärjestykseen, on Adobe Muse.
Musein tekemät grafiikan ammattilaiset ovat melko hämmästyttäviä ja näet näytteenoton siitä, mitä voit tehdä vierailemalla Muse- sivustolla The Day . Vaikka web-ammattilaiset pitävät Museia jonkinlaisena "wind-up-leluna", suunnittelijat käyttävät sitä myös mobiili- ja web-prototyyppien luomiseen, jotka luovutetaan lopulta tiimilleen kehittäjille.
Yksi tekniikka, joka on uskomattoman helposti saavutettavissa Musein kanssa, on parallaksin vieritys, ja jos haluat nähdä suorituksen valmiin version, käymme läpi selaimesi tällä sivulla. Kun liikutat hiiren vierityspyörää, teksti näyttää siirtyvän ylös tai alas sivulle ja kuvat muuttuvat.
Aloitetaan.
01/07
Luo verkkosivu
Kun käynnistät Musein, napsauta New Site -linkkiä. Tämä avaa uuden sivuston ominaisuudet . Tämä projekti on suunniteltu työpöytäsovellukselle ja voit valita sen aloitusnäytön alasvetovalikosta. Voit myös asettaa arvot sarakkeiden lukumäärästä, haaran leveydestä, marginaaleista ja tasoitusmääristä. Tässä tapauksessa emme olleet kovinkaan huolestuneita tästä ja napsauttimme OK .
02/07
Muotoile sivu
Kun määrität sivuston ominaisuudet ja napsautat OK, sinut vietiin Plan- näkymään. Yläosassa on kotisivu ja pääikkuna ikkunan alaosassa. Tarvitsimme vain yhden sivun. Pääset Design View -ohjelmaan kaksoisnapsauttamalla etusivua, joka avasi käyttöliittymän.
Vasemmalla on muutamia perustyökaluja ja oikealla on useita paneeleita, joita käytetään manipuloimaan sivun sisältöä. Yläosan yläpuolella on ominaisuuksia, joita voidaan soveltaa sivulle tai mille tahansa sivulle valituiksi. Tässä tapauksessa halusimme olla musta tausta. Tämän saavuttamiseksi klikkaamme Browser Fill värisirua ja valitsimme mustan värivalitsimesta.
03/07
Lisää teksti sivulle
Seuraava vaihe on lisätä tekstiä sivulle. Valitsimme tekstityökalun ja nostimme tekstilaatikon. Soitimme sanan "Tervetuloa" ja Ominaisuudet-asetukseksi asetettiin teksti Arial, 120 pikseliä Valkoinen. Keskitetty.
Sitten vaihdimme valintatyökaluun, napsautimme tekstiruutua ja asetimme sen Y-asentoon 168 pikselin yläosaan. Kun valintaruutu on vielä valittuna, avasimme Align-paneelin ja kohdistimme tekstiruutuun keskelle.
Kun valitsit tekstilaatikon, painimme Option / Alt- ja Vaihto- näppäimiä alaspäin ja teimme neljä kopiota tekstilaatikosta. Muutimme jokaisen kopion tekstiä ja Y-asemaa:
- To, 871
- Grafiikka, 1621
- Software, 2371
- @home.info, 3181
Huomaat, että kun asetat kunkin tekstikentän sijainnin, sivu muuttuu tekstin sijainnin mukaan.
04/07
Lisää kuva paikkamerkit
Seuraava askel on laittaa kuvat tekstilohkojen väliin.
Ensimmäinen vaihe on valita suorakulmion työkalu ja piirtää laatikko, joka ulottuu sivun toiselta puolelta toiselle. Kun suorakulmio valittiin, asetimme sen korkeuden 250 pikseliin ja sen Y-asentoon 425 pikseliin . Suunnitelma on saada ne aina venyttämään tai sopimaan sivun leveydelle käyttäjän selausnäkymän mukauttamiseksi. Tämän saavuttamiseksi napsautimme 100% leveyspainiketta Ominaisuudet-kohdassa. Tämä on harmaata X-arvoa ja varmistaa, että kuva on aina 100% selaimen näkymän leveydestä.
05/07
Lisää kuvia kuvakohteisiin
Kun suorakulmio on valittu, napsautimme Täytä-linkkiä - ei värimerkkiä - ja napsautimme I- mage-musteen lisätäksesi kuvan suorakulmioksi. Sovitusalueessa valitsimme Skaalaus sopivaksi ja napsautimme Keski-kahvaa Position- alueella varmistaaksemme, että kuva skaalataan kuvan keskeltä.
Seuraavaksi käytimme Option / Alt-Shift-drag- tekniikkaa kopion luomiseen kahden ensimmäisen tekstilohkon välillä, avattu Täytä-paneeli ja vaihdettiin kuva toiselle. Teimme tämän myös jäljellä oleville kahdelle kuvalle.
Kun kuvat ovat paikallaan, on aika lisätä liike.
06/07
Lisää Parallax-vieritys
Adobe Museissa on useita tapoja lisätä parallaksin vieritys. Aiomme näyttää sinulle yksinkertaisen tavan tehdä se.
Kun Täyttö-paneeli on auki, napsauta Vieritys-välilehteä ja, kun se avautuu, napsauta Liikenne-valintaruutua .
Näet Initial ja Final Motion arvot. Nämä määrittävät, kuinka nopeasti kuva liikkuu suhteessa vierityspyörään. Esimerkiksi 1,5: n arvo siirtää kuvan 1,5 kertaa nopeammin kuin pyörä. Käytimme arvoa 0 lukitsemalla kuvat paikalleen.
Vaaka- ja pystysuuntaiset nuolet määrittävät liikkeen suunnan. Jos arvot ovat 0, kuvat eivät muutu riippumatta siitä, mitä nuolta napsautat.
Keskimmäinen arvo - Key Position - näyttää pisteen, jossa kuvat alkavat liikkua. Kuvan yläpuolella oleva viiva alkaa tämän kuvan kohdalla 325 pikseliä sivun yläosasta. Kun vieritys saavuttaa arvon, kuva alkaa liikkua. Voit muuttaa tätä arvoa joko vaihtamalla sen valintaikkunassa tai napsauttamalla ja vetämällä viivan yläosassa olevaa kohtaa joko ylös tai alas.
Toista tämä sivun muihin kuviin.
07/07
Selaimen testi
Tässä vaiheessa olimme valmiit. Ensimmäinen asia, jonka olemme tehneet ilmeisistä syistä, oli valita File> Save Site . Selaintestiin valitsimme vain tiedoston> esikatselusivu selaimessa . Tämä avasi tietokoneen oletusselaimen ja sivun avaamisen jälkeen aloitimme selaamisen.