Viens no "karstākie" paņēmieniem tīmeklī šodien ir paralakses ritināšana. Mēs visi esam bijuši tajās vietnēs, kur pēkšņi pagriežat ritināšanas ritenīti, un lapas saturs virzās uz augšu un uz leju vai pa lapu, pagriežot peles ritenīti.
Tiem, kas jaunāki par web dizainu un grafisko dizainu, šo tehniku var ļoti grūti sasniegt, ņemot vērā nepieciešamo CSS daudzumu.
Ja tas apraksta jūs, ir vairāki pieteikumi, kas var vienkārši pārsūdzēt grafiskos māksliniekus. Tās pamatā izmanto pazīstamu lapas izkārtojumu pieeju tīmekļa lapām, kas nozīmē, ka nav daudz, ja tāds ir, ir iesaistīta kodēšana. Viena lieta, kas patiešām ir kļuvusi svarīgāka, ir Adobe Muse.
Darbs, ko veic grafikas plusi, izmantojot Muse, ir diezgan pārsteidzošs, un jūs varat redzēt paraugu no tā, ko jūs varat darīt, apmeklējot Muse Site of The Day . Kaut arī interneta profesionāļi uzskata, ka Muse ir kaut kāda veida "sabojāt rotaļlietu", dizaineri to izmanto arī, lai izveidotu mobilos un interneta prototipus, kurus galu galā nodos izstrādātājiem savā komandā.
Viena tehnika, kas ir neticami viegli izpildāma ar Muse, ir paralakses ritināšana, un, ja vēlaties redzēt pabeigto uzdevuma versiju, mēs ejam cauri, norādiet jūsu pārlūkprogrammu uz šo lapu. Pārnākot peles kursoru, šķiet, ka teksts virza lapas augšup vai lejup, un attēli mainās.
Sāksim.
01 no 07
Izveidojiet Web lapu
Kad jūs sākat Muse, noklikšķiniet uz Saites Jauna vietne . Tas atvērs jaunās vietnes rekvizītus . Šis projekts tiks izstrādāts darbvirsmas lietojumprogrammai, un to var atlasīt nolaižamajā izvēlnē Sākuma izkārtojums . Varat arī iestatīt vērtību kolonnu skaitu, notekas platumu, maržas un polsterējumu. Šajā gadījumā mēs neesam ļoti bažījāmies par to un vienkārši noklikšķinājām uz Labi .
02 no 07
Formatizējiet lapu
Kad jūs iestatāt vietnes rekvizītus un noklikšķinājāt uz Labi, jūs tika novirzīts uz to, ko sauc par plāna skatu. Augšdaļā ir galvenā lapa un loga apakšdaļā ir galvenā lapa . Mums vajadzēja tikai vienu lapu. Lai nokļūtu dizaina skatā, mēs divreiz noklikšķinājām uz mājas lapas, kurā tika atvērta saskarne.
Kreisajā pusē ir daži pamata rīki, un pa labi ir dažādi paneļi, ko izmanto, lai manipulētu ar lapas saturu. Virsajā pusē ir īpašības, kuras var tikt pielietotas lapai vai kāds no lapas izvēlētajiem elementiem. Šajā gadījumā mēs gribējām būt melna fona. Lai to paveiktu, mēs noklikšķinām uz pārlūkprogrammas aizpildījuma krāsu mikroshēmas un no krāsu atlasītāja izvēlējāties melnā krāsā.
03 no 07
Pievienot tekstu lapai
Nākamais solis ir pievienot tekstu lapai. Mēs izvēlējāmies Teksta rīku un izvilka teksta lodziņu. Mēs ievadījām vārdu "Welcome" un rediģējumā Arial norādiet tekstu 120 pikseli balta. Saskaņots centrs.
Tad mēs pārslēdzām uz atlases rīku, noklikšķinājām uz teksta lauka un iestatījām Y pozīciju 168 pikseļiem no augšas. Ar tekstlodziņu vēl atlasot, mēs atvērām paneli Align un izlīdzināja teksta lodziņu uz centru.
Visbeidzot, izvēloties teksta lodziņu, mēs turējām lejup Opcijas / Alt un Shift taustiņus un izveidojām četras teksta lodziņa kopijas. Mēs mainījām katra eksemplāra tekstu un Y pozīciju uz:
- Līdz, 871
- Grafika, 1621
- Programmatūra, 2371
- @ About.com, 3181
Jūs ievērosiet, ka, iestatot katras teksta lodziņa atrašanās vietu, lapa mainās, lai pielāgotu teksta atrašanās vietu.
04 no 07
Pievienot attēlu aizstājējus
Nākamais solis ir ievietot attēlus starp teksta blokiem.
Pirmais solis ir izvēlēties taisnstūra rīku un izdarīt mūsu lodziņu, kas stiepjas no vienas puses lapas uz otru. Izvēloties taisnstūri, mēs iestatām tā augstumu līdz 250 pikseļiem un Y pozīciju līdz 425 pikseļiem . Plāns ir tas, lai tie vienmēr stiepjas vai pielāgotos lapas platumam, lai pielāgotu lietotāja pārlūka skatu punktu. Lai to paveiktu, mēs noklikšķinājām uz 100% platuma pogas rekvizītos. Tas nozīmē, ka pelēkā krāsa ir X vērtība, un pārlūka laikā attēls vienmēr ir 100% no skata punkta platuma.
05 no 07
Pievienot attēlus attēla aizstājējiem
Izvēloties taisnstūri, mēs noklikšķinājām uz Fill saites - nevis Color Chip - un noklikšķinājām uz I mage tintes, lai pievienotu attēlu taisnstūrī. Fitting zonā mēs izvēlējāmies Scale To Fit un noklikšķinājuši uz centrālo rokturi pozīcijas apgabalā, lai nodrošinātu, ka attēls tiek samazināts no attēla centra.
Tālāk mēs izmantojām Option / Alt-Shift-drag tehniku, lai izveidotu attēla kopiju starp pirmajiem diviem teksta blokiem, atvērtu aizpildīšanas paneli un mainītu attēlu citam. Mēs to izdarījām arī pārējiem diviem attēliem.
Ar attēliem vietā ir pienācis laiks pievienot kustību.
06 no 07
Pievienot paralakses ritināšanu
Programmā Adobe Muse var pievienot vairāk paralakses ritināšanas iespēju. Mēs parādīsim jums vienkāršu veidu, kā to izdarīt.
Atverot lauku Fill, noklikšķiniet uz cilnes Ritināt un, kad tas tiek atvērts, noklikšķiniet uz pogas Kustība .
Jūs redzēsit sākotnējā un pēdējā kustība . Tie nosaka, cik ātri attēls tiek pārvietots attiecībā pret ritināšanas riteni. Piemēram, vērtība 1.5 pavērsīs attēlu 1,5 reizes ātrāk nekā ritenis. Lai bloķētu attēlus, mēs izmantojām vērtību 0.
Horizontālās un vertikālās bultiņas nosaka kustības virzienu. Ja vērtības ir 0, attēli netiks pārvietoti, neatkarīgi no tā, uz kuru bultiņu jūs noklikšķiniet.
Vidējā vērtība - galvenā pozīcija - parāda vietu, kur attēli sāk pārvietoties. Virs attēla esošā līnija šim attēlam sākas ar 325 pikseļiem no lapas augšdaļas. Kad ritināšanās sasniedz šo vērtību, attēls sāk kustēties. Varat mainīt šo vērtību, mainot to dialoglodziņā vai noklikšķinot un velkot punktu līnijas augšpusē augšup vai lejup.
Atkārtojiet to citiem attēliem lapā.
07 no 07
Pārlūka pārbaude
Šajā brīdī mēs beidzām. Skaidru iemeslu dēļ mēs vispirms izvēlējāmies failu> Saglabāt vietni . Pārlūkprogrammas testa veikšanai mēs vienkārši pārlūkprogrammā izvēlējāmies failu> Preview Page . Tas atvēra mūsu datora noklusējuma pārlūku un, kad lapa tika atvērta, mēs sākām ritināšanu.