Az internet egyik legforróbb technikája a parallax görgetés. Mindannyian olyan helyekre kerültünk, ahol az egér görgőjét forgatja, és az oldal tartalma felfelé vagy lefelé, vagy az oldal fölé mozog, miközben forgatja az egérgörgőt.
Az új webdesign és grafikai tervezés számára ez a technika rendkívül nehéz lehet elérni a szükséges CSS mennyiség miatt.
Ha ez leírja Önt, számos olyan alkalmazás létezik, amelyek csak a grafikusok számára vonzóak. Alapvetően egy ismerős oldalelrendezést alkalmaznak a weboldalakon, ami azt jelenti, hogy nincs sok, ha van ilyen, a kódolás. Egy olyan alkalmazás, amely valóban elterjedt az előtérben, az Adobe Muse.
A mûvészeti grafikusok által végzett munka meglehetõsen elképesztõ, és megtekinthetõ, hogy mit tehet a múzeum látogatásával A napi site . Bár a webes szakemberek úgy tekintenek Muse-ra, mint valamiféle "felcsapódó játéknak", a tervezők is használják mobil és webes prototípusok létrehozását, amelyeket végül a csapat fejlesztőinek adnak át.
Az egyik olyan technika, amely hihetetlenül könnyű elérni a Muse-ot, a parallax görgetés, és ha látni szeretné a feladat befejezett verzióját. Amikor az egér görgőjét görgeti, a szöveg úgy tűnik, hogy felfelé vagy lefelé mozog, és a képek megváltoznak.
Kezdjük el.
01/07Weboldal létrehozása
Amikor elindítja Muse, kattintson a Új webhely link. Ez megnyitja a Új webhely tulajdonságai. Ezt a projektet egy asztali alkalmazáshoz tervezik, és kiválaszthatja azt a Kezdeti elrendezés legördülő menüből. Megadhatja az oszlopok számát, az ereszcsatornák szélességét, a margókat és a tömböt is. Ebben az esetben nem szörnyűen érintettünk, és egyszerűen rákattintunk rendben.
Formázza az oldalt
Amikor beállította a webhely tulajdonságait és rákattintott rendben te vittétek el, amit hívsz Terv Kilátás. Van egy itthon lap tetején és a Mesteroldal az ablak alján. Csak egy oldalra volt szükségünk. A Tervezés nézethez való hozzáféréshez duplán kattattunk a kezdőlapra, amely megnyitotta a felületet.
A bal oldalon néhány alapvető eszköz található, a jobb oldalon különféle panelek használhatók az oldal tartalmának manipulálására. A tetején találhatóak a tulajdonságok, amelyek az oldalra vagy az oldalon kiválasztott elemekre alkalmazhatók. Ebben az esetben fekete háttérrel akarunk lenni. Ehhez kattintsunk a Böngésző kitöltése színes chipet választott és fekete színt választott a Színválasztóból.
03. 07. szSzöveg hozzáadása az oldalhoz
A következő lépés az, hogy adjunk hozzá néhány szöveget az oldalra. Kiválasztottuk a Szöveges eszköz és kihúzta a szövegdobozt. A "Üdvözöljük" szót választottuk, a Tulajdonságok pedig beállította a szöveget Arial, 120 pixel fehér. Központ összehangolt.
Ezután váltottunk a Kiválasztás eszközre, rákattintottunk a Textboxra és beállítottuk Y helyzetét 168-ra pixel felülről. A még mindig kiválasztott szövegdoboz megnyitotta a Illessze a panelet és a szövegdobozt a központ felé igazította.
Végül a kijelölt szövegdobozban lefuttattuk a Option / Alt és Váltás kulcsokat, és négy másolatot készített a szövegdobozból. Az egyes példányok szövegét és Y pozícióját megváltoztattuk:
- To, 871
- Grafika, 1621
- Szoftver, 2371
Észre fogja venni, hogy az egyes szövegdobozok helyének beállításakor az oldal átméretezi a szöveg helyét.
04, 07Helyezzen be helyhez tartozó helyeket
A következő lépés az, hogy képeket helyezzen el a szövegblokkok között.
Az első lépés a Négyszögű eszköz és húzzon egy dobozt, amely az oldal egyik oldaláról a másikra húzódik. A téglalap kiválasztásával beállítottuk magasság 250 képpontig és annak Y pozícióját 425 képpontra. A terv az, hogy mindig nyújthassanak vagy szerződést kötjenek az oldal szélességével a felhasználó böngésző nézetablakának megfelelően. Ehhez kattintsunk a 100% szélesség gombot a Tulajdonságokban. Ami ez, szürke az X-érték és annak biztosítása, hogy a kép mindig a nézet szélességének 100% -a legyen a böngészőben.
05/07Képek hozzáadása a kép helyőrzőinek
A kiválasztott téglalappal a következőre kattintottam Fill link - nem a Color Chip - és rákattintott az I-remágus tinta kép hozzáadásához a téglalapba. Ban,-ben Szerelvény területet választottuk ki Méretre igazítás és rákattintott a középső fogantyú ban,-ben Pozíció hogy a kép a kép középpontjából skálázható legyen.
Ezt követően a Option / Alt-Shift-húzás technika, hogy létrehozza a kép egy példányát az első két szövegblokk között, megnyitotta a Fill-panelt, és kicserélte a képet egy másik számára. Ezt a fennmaradó két képet is megtettük.
A képek helyén, itt az ideje, hogy hozzáadja a mozgást.
06, 07Parallax görgetés hozzáadása
Az Adobe Museban többféle módon lehet hozzáadni a parallax görgetést. Megmutatjuk neked egy egyszerű módját.
A Fill mező megnyitásával kattintson a Görgetés lap és ha megnyílik, kattintson a Mozgás jelölőnégyzetet.
Értéseket fog látni A kezdeti és Végső mozgás. Ezek meghatározzák, milyen gyorsan mozog a kép a gördítőkeréken. Például 1,5-es érték mozgatja a képet 1,5-szer gyorsabban, mint a kerék. 0-ot használtunk a képek rögzítéséhez.
A Vízszintes és függőleges nyilak meghatározza a mozgás irányát.Ha az értékek 0, akkor a képek nem fognak továbbhaladni, függetlenül attól, hogy melyik nyílra kattint.
A középérték – Kulcspozíció - megmutatja azt a pontot, ahol a képek mozogni kezdenek. A kép fölött lévő vonal 325 képpontot nyit az oldal tetejétől. Amikor a görgető eléri ezt az értéket, a kép elkezd mozogni. Ezt az értéket megváltoztathatja a párbeszédpanelen vagy a sor felső részén lévő vagy csúsztatható pontra kattintva, illetve húzva.
Ismételje meg ezt az oldal más képeire.
07, 07Böngésző teszt
Ezen a ponton végeztünk. Az első dolog, amit nyilvánvaló okokból tettünk, az volt, hogy kiválasszuk Fájl> Honlap mentése. A böngésző teszteléséhez egyszerűen választottuk ki Fájl> Előnézeti oldal a böngészőben. Ez megnyitotta a számítógép alapértelmezett böngészőjét, és az oldal megnyitásakor elkezdtük a görgetést.
