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 munkák meglehetõsen elképesztõek, és megtekinthetõ, hogy mit tehet meg, ha meglátogatja a Múzeum helyszínét . 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 befejezett verzióját, akkor meglátjuk a böngészőt ezen az oldalon. 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.
Lássunk neki.
01/07
Weboldal létrehozása
Amikor elindítja Muse, kattintson az Új webhely linkre. Ez megnyitja az Új webhely tulajdonságait . Ezt a projektet egy asztali alkalmazáshoz tervezzük, és kiválaszthatjuk a Kezdeti elrendezés legördülő menüben. 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 nagyon érintettünk, és egyszerűen kattintsunk OK gombra .
02, 07
Formázza az oldalt
Amikor beállította a webhely tulajdonságait, és rákattintott az OK gombra, akkor a Plan view mappába került. A tetején van egy kezdőlap és egy ablak az ablak alján található mesteroldalon . 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 Browser Fill színes chipre, és fekete színt választottunk a Színválasztóból.
03. 07. sz
Szö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özt, és kivágtunk egy szövegdobozt. A "Üdvözöljük" szót választottuk, és a Tulajdonságok menüben állítottuk be a szöveget Arialnek, 120 pixel White. Központ összehangolt.
Ezután átkapcsoltunk a Kiválasztás eszközre, rákattintottunk a Textboxra, és beállítottuk az Y pozícióját 168 pixelre felülről. A még mindig kijelölt szövegdobozban megnyitottuk az Igazítás panelt, és a szövegdobozt a központ felé igazítottuk.
Végül, a kijelölt szövegdobozban tartottuk lenyomva az Option / Alt és a Shift billentyűt, és a szövegdoboz négy példányát készítettük. Az egyes példányok szövegét és Y pozícióját megváltoztattuk:
- To, 871
- Grafika, 1621
- Szoftver, 2371
- @ Hui.info, 3181
Észre fogja venni, hogy az egyes szövegdobozok helyének beállításakor az oldal átméretezi a szöveg helyét.
04, 07
Helyezzen 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 az, hogy kiválaszthatja a Négyszögű eszközt, és felhívja a dobozt, amely az oldal egyik oldaláról a másikra húzódik. A kiválasztott téglalappal a magasságát 250 képpontra állítottuk, és 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 a Tulajdonságok 100% -os szélességi gombjára kattintottunk. 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/07
Képek hozzáadása a kép helyőrzőinek
A választott téglalap segítségével a Fill mezõre - nem a színes chipre - kattintottunk, és a téglalapot a téglalapba felvettem. A Felszerelés területen a Scale To Fit választottuk, és a középső fogantyúra kattintottunk a Pozíció mezőben, hogy a kép a kép középpontjából skálázható legyen.
Ezután az Option / Alt-Shift-drag technológiát használva létrehoztuk a kép egy példányát az első két szövegblokk között, megnyitottuk a Fill-panelt, és kicseréltük 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, 07
Parallax 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.
Ha a Kitöltés panel megnyílik, kattintson a Lapozás fülre, és amikor megnyílik, kattintson a Mozgás jelölőnégyzetre .
A kezdeti és a végleges mozgások értékét fogja látni. 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 határozzák meg 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ó - azt a pontot mutatja, ahol a képek elkezdenek mozogni. 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, 07
Böngésző teszt
Ezen a ponton végeztünk. Az első dolog, amit nyilvánvaló okokból tettünk, a File> Site mentése volt . A böngésző teszteléséhez egyszerűen kijelöltük a Fájl> Előnézeti oldal a böngészőben lehetőséget . 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.