Gaur egun webaren "beroena" teknologietako bat parallax korritzea da. Gurpileko gurpila saguaren gurpila biratzen duzun tokietan izan dugu eta orrialdean edukia gora eta behera mugitzen da edo orrialdetik saguaren gurpila biratzen duzunean.
Web diseinu eta diseinu grafiko berrientzat, teknika hau oso zaila izan daiteke CSS kopuruaren araberakoa lortzeko.
Hausnartzen baduzu, artista grafikoei iruditzen zaizkien aplikazioak daude. Orokorrean, web orriak diseinatutako web orrialde ezagun bat erabiltzen dute, eta horrek esan nahi du ez dagoela asko, baldin badago, kodeketak. Benetan nabarmena izan den aplikazio bat Adobe Muse da.
Museen bidez pros grafikoak egiten ari den lana oso harrigarria da eta Muse of The Day webgunea bisitatu dezakezu zer egin dezakezu. Webguneak "Museoak jostailu" mota batzuk izateak museoari begiratzen badio ere, diseinatzaileek ere erabiltzen dute mugikor eta web prototipoak sortzeko, euren taldeko garatzaileei entregatu ahal izateko.
Musearentzat oso erraza den teknika bat parallaxia korrituta dago eta ariketa bukatutako bertsioa ikusi nahi baduzu, oinez egingo dugu eta orrialde honetara nabigatu. Saguaren gurpileko gurpila igortzen duzunean, testua gora edo behera orrialde eta irudiak aldatzen direla dirudi.
Has gaitezen.
07/01
Web orri bat sortu
Muse abiarazten duzunean, egin klik New Site esteka botoian. Honek gune berriaren propietateak irekiko ditu. Proiektu hau mahaigainean aplikatzeko diseinatua izango da eta hasierako diseinua pop-up menuan hautatzeko aukera izango duzu. Zutabeen, kanalaren zabalera, marjinak eta betegarri kopurua ere ezar ditzakezu. Kasu honetan, ez genuen horrelako arazo larririk izan, eta, besterik gabe, OK sakatu.
07/02
Orrialdea formateatzea
Gunearen propietateak konfiguratzen dituzunean eta egin klik Ados Planaren ikuspegira deitzen zaitu. Hasierako orri bat dago goiko aldean eta Master Orrialdea leihoaren behealdean. Orri bat bakarrik behar dugu. Design View-era iristeko, egin klik bikoitza interfazea ireki duen Hasiera orria.
Ezkerreko oinarrizko tresnak dira eta eskuinera orriaren edukia manipulatzeko erabiltzen diren panelak daude. Goiko aldean propietateak dira, orrialdeari aplikatu ahal zaizkionak, edo orrialdean hautatutako ezer. Kasu honetan, hondo beltz bat izan nahi genuen. Horretarako, nabigatzailean betetako kolore-txipa sakatu eta kolorea aukeratzerakoan beltza hautatu dugu.
07/03
Gehitu testua orrialdean
Hurrengo pausoa testua orrialdean gehitzea da. Testu-tresna hautatu dugu eta testu-koadro bat atera da. "Ongi etorri" hitza sartu genuen eta, Propietateak testua Arialora doitzeko , 120 pixel zuria. Zentroa lerrokatzea.
Aukeraketa tresna bihurtu dugu, Testu-kaxan klik egin eta Y posizioa 168 goitik pixeletan ezarri. Oraindik hautatutako testu-koadroan, Align panel ireki dugu eta testu-koadroa erdian lerrokatu.
Azkenean, hautatutako testuarekin, aukera / Alt eta Shift teklak behera eutsi eta lau koadroko testuak egin. Testua eta kopia bakoitzaren Y postua aldatu ditugu:
- To, 871
- Graphics, 1621
- Software, 2371
- @ About.com, 3181
Kontuan izango duzu, testu-koadro bakoitzaren kokalekua zehaztean, orrialdea tamainaz aldatuko da testuaren kokapena egokitzeko.
07.07
Gehitu irudia leku-markatzaileak
Hurrengo pausoa testua blokeen arteko irudiak jartzea da.
Lehen urratsa da Rectangle Tool aukeratzea eta orri bat alde batetik bestera luzatzen duen koadroa marraztu. Hautatu hautatutako laukizuzena, 250 pixeleko altuera eta 425 pixeleko Y posizioa ezarriko ditugu. Plana beti luzatu edo orriaren zabalera kontratatu behar da, erabiltzailearen arakatzailearen erakusleihoa moldatzeko. Horretarako, Propietateak % 100eko zabalera botoia sakatu dugu. X zer den X-ren balioa grisa da eta irudia beti nabigatzaile baten bisorearen zabalera% 100 da.
07.07
Gehitu irudiak irudiaren leku-markatzaileetara
Aukeratutako laukizuzenarekin Bete esteka - Ez Color Chip - klikatu dugu eta I mage tinta sakatu irudia laukizuzen batean gehitzeko. Fitting-aren eremuan, Scale To Fit aukeratu dugu eta klikatu erdiko kudea Kargatzeko eremuan irudia irudiaren erdian eskalatzeko.
Ondoren, aukera / Alt-Shift-drag technique erabili dugu lehen bi testu-blokeen artean dagoen irudiaren kopia bat sortzeko, betearazi panela ireki eta beste baten irudia aldatu. Beste bi irudi ere egin genituen.
Irudiak lekuarekin mugimendua gehitzeko garaia da.
07/06
Gehitu Parallax desplazamendua
Hainbat parallax korritze gehitzen dira Adobe Muse-en. Erakusteko modu erraz bat egingo dugu.
Bete panela irekita, sakatu Mugitu fitxa eta, irekitzen denean, sakatu Mugimendua kontrol-laukia .
Initial and Final Motion-en balioak ikusiko dituzu. Horrek zehazten du nola mugitzen den Irudia gurpilen gainean. Adibidez, 1.5 balioa 1.5 aldiz azkarrago mugituko da gurpila baino. 0 balioa erabiltzen dugu irudiak leku blokeatzeko.
Gezi horizontalak eta bertikalak mugimenduaren norabidea zehazten dute. Balioak 0 bada, irudiak ez dira mugituko, hurrenez hurren gezia zein den.
Erdiko balioa - Tekla tekla - irudiak mugitzen hasten diren puntua erakusten du. Irudiaren gaineko ilara hasten da, irudi honetarako, orriaren goialdean 325 pixel. Korritura iristen denean, irudia mugitzen hasten da. Balio hau alda dezakezu elkarrizketa-koadroan aldatuz edo lerroaren goialdean puntua eta arrastatu gora eta behera.
Errepikatu orri honetako beste irudietarako.
07ko 07
Arakatzailearen proba
Puntu honetan, amaitu ginen. Arrazoi nabarienak egin genituen lehenik, File> Save Site aukeratu zen. Arakatzailearen testera, Fitxategia> Aurrebista orria aukeratu dugu Arakatzailean . Honek gure ordenagailuaren lehenetsitako nabigatzailea ireki zuen eta, orrialde ireki zenean, korritu egin genuen.