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 työt ovat varsin hämmästyttäviä ja näet näytteenoton siitä, mitä voit tehdä Muse-vierailulla Päivän sivusto . 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 helppo saavuttaa Musein kanssa, on parallaksin vieritys ja jos haluat nähdä suorituksen valmiin version. Kun liikutat hiiren vierityspyörää, teksti näyttää siirtyvän ylös tai alas sivulle ja kuvat muuttuvat.
Aloitetaan.
01/07Luo verkkosivu
Kun käynnistät Musein, napsauta Uusi sivusto linkki. Tämä avaa Uuden sivuston ominaisuudet. Tämä projekti on suunniteltu työpöytäsovellukselle ja voit valita sen Alustava asettelu ponnahdusvalikosta. Voit myös asettaa arvot sarakkeiden lukumäärästä, haaran leveydestä, marginaaleista ja tasoitusmääristä. Tässä tapauksessa emme ole kovinkaan huolestuneita tästä ja yksinkertaisesti napsautettu kunnossa.
Muotoile sivu
Kun asetat sivuston ominaisuudet ja napsautat kunnossa sinut vietiin siihen, mitä kutsutaan Suunnitelma näkymä. Tuolla on Koti sivu yläreunassa ja a Master-sivu 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 Selaimen täyttö värisiru ja valitsi mustan värivalitsimesta.
03/07Lisää teksti sivulle
Seuraava vaihe on lisätä tekstiä sivulle. Valitsimme Tekstityökalu ja piirtänyt tekstiruutuun. Soitimme sanan "Tervetuloa" ja Ominaisuudet-asetukseksi asetetaan teksti Arial, 120 pikseliä valkoinen. Keskitetty.
Sitten vaihdimme valintatyökaluun, napsautimme tekstiruutua ja asetimme sen Y-asema 168: een pikseliä ylhäältä. Kun valintaruutu on vielä valittu, avasimme Kohdista paneeli ja kohdistanut tekstiruutuun keskelle.
Lopuksi valittu tekstikenttä valittiin Optio / Alt ja Siirtää näppäimet ja tehnyt neljä kopiota tekstiruutuun. Muutimme jokaisen kopion tekstiä ja Y-asemaa:
- To, 871
- Grafiikka, 1621
- Software, 2371
Huomaat, että kun asetat kunkin tekstikentän sijainnin, sivu muuttuu tekstin sijainnin mukaan.
04/07Lisää kuva paikkamerkit
Seuraava askel on laittaa kuvat tekstilohkojen väliin.
Ensimmäinen vaihe on valita Suorakulmion työkalu ja piirrä laatikko, joka ulottuu sivun toiselta puolelta toiselle. Kun suorakulmio on valittu, asetamme sen korkeus 250 pikseliä ja se on Y-asema 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% leveys painiketta Ominaisuudet. Tämä on harmaata X-arvoa ja varmistaa, että kuva on aina 100% selaimen näkymän leveydestä.
05/07Lisää kuvia kuvakohteisiin
Kun suorakulmio valittiin, napsautimme Täytä linkki - ei Color Chip - ja napsautti Imusteen muste lisätäksesi kuvan suorakulmioksi. Vuonna Asennus alue, valitsimme Skaalaus sopivaksi ja napsautti keskellä kahva vuonna asento alue varmistaa kuvan skaalata kuvan keskeltä.
Seuraavaksi käytimme Optio / Alt-Shift-vedä tekniikka kopion luomiseksi kahdesta ensimmäisestä tekstilohkosta, avasi Täytä-paneelin ja vaihtoi kuvan toiselle. Teimme tämän myös jäljellä oleville kahdelle kuvalle.
Kun kuvat ovat paikallaan, on aika lisätä liike.
06/07Lisää 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 Vieritä välilehteä ja napsauttamalla sitä avautuu Liikenne-valintaruutu.
Näet arvoja Alkukirjain ja Lopullinen liike. 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ääritä liikkeen suunta.Jos arvot ovat 0, kuvat eivät muutu riippumatta siitä, mitä nuolta napsautat.
Keskiarvo – Avainasema - osoittaa 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/07Selaimen testi
Tässä vaiheessa olimme valmiit. Ensimmäinen asia, jonka teimme selviä syitä, oli valita Tiedosto> Tallenna sivusto. Selaintestiin me vain valitsimme Tiedosto> Esikatselukuva selaimessa. Tämä avasi tietokoneen oletusselaimen ja sivun avaamisen jälkeen aloitimme selaamisen.
