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 izlasi par to, ko jūs varat darīt, apmeklējot Muse Dienas vieta . 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ā.
Viens no tehnikiem, kas ir neticami viegli izpildāms ar Muse, ir paralakses ritināšana un, ja jūs vēlaties redzēt pabeigto uzdevuma versiju. Pārnākot peles kursoru, šķiet, ka teksts virza lapas augšup vai lejup, un attēli mainās.
Sāksim.
01 no 07Izveidojiet Web lapu
Kad jūs sākat Muse, noklikšķiniet uz Jauna vietne saite Tas atvērs Jaunas vietnes rekvizīti. Šis projekts būs paredzēts darbvirsmas lietojumprogrammai, un to varēsiet atlasīt programmā Sākotnējais izkārtojums nolaižamā izvēlne. Varat arī iestatīt vērtību kolonnu skaitu, notekas platumu, maržas un polsterējumu. Šajā gadījumā mums tas nebija bīstami un vienkārši tika noklikšķināts labi.
Formatizējiet lapu
Kad jūs iestatāt vietnes rekvizītus un uzklikšķināt labi jūs tika ņemti uz to, kas tiek saukts Plānu skats Tur ir Mājas lapas augšdaļā un a Maģistra lapa loga apakšā. 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 Browser Fill krāsu mikroshēmu un izvēloties melnu krāsu atlasītāju.
03 no 07Pievienot tekstu lapai
Nākamais solis ir pievienot tekstu lapai. Mēs izvēlējāmies Teksta rīks un izvilka teksta lodziņu. Mēs ievadījām vārdu "Welcome", un sadaļā Properties (Rekvizīti) ievadiet tekstu uz Arial, 120 pikseļi balta. Saskaņots centrs.
Pēc tam mēs pārslēdzām uz atlases rīku, noklikšķinājām uz teksta lauka un iestatījām to Y pozīcija uz 168 pikseļi no augšas. Ar teksta lodziņu joprojām atlasīts, mēs atvērām Panelis panelis un izlīdzina teksta lodziņu uz centru.
Visbeidzot, izvēloties tekstlodziņu, mēs turējām nospiestu Opcija / Alt un Maiņa atslēgas un izgatavoja č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
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 07Pievienot attēlu aizstājējus
Nākamais solis ir ievietot attēlus starp teksta blokiem.
Pirmais solis ir izvēlēties Taisnstūra rīks un noformulējiet mūsu kasti, kas stiepjas no vienas puses lapas uz otru. Izvēloties taisnstūri, mēs to iestatījām augstums līdz 250 pikseļiem un tas ir Y pozīcija ir 425 pikseļi. 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% platums 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 07Pievienot attēlus attēla aizstājējiem
Ar izvēlēto taisnstūri mēs noklikšķinājām uz Aizpildīt saiti - nevis krāsu mikroshēmu - un noklikšķinājis uz Imagnija tinte lai pievienotu attēlu taisnstūrī. Iekš Montāža apgabals, mēs izvēlējāmies Mērogojamība un noklikšķinājis uz centra rokturis iekš Amats lai nodrošinātu attēla mērogošanu no attēla centra.
Tālāk mēs izmantojām Iespēja / Alt-Shift-velciet metode, 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 07Pievienot 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 Ritiniet cilni un, kad tas tiek atvērts, noklikšķiniet uz Izvēles rūtiņa Motion.
Jūs redzēsiet vērtības Sākotnējā un Gala 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.
The 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 07Pārlūka pārbaude
Šajā brīdī mēs beidzām. Pirmā lieta, ko mēs to izdarījām acīmredzamu iemeslu dēļ, bija izvēlēties Fails> Saglabāt vietni. Pārbaudes pārlūkprogrammai mēs vienkārši atlasījām Fails> Preview Page pārlūkprogrammā. Tas atvēra mūsu datora noklusējuma pārlūku un, kad lapa tika atvērta, mēs sākām ritināšanu.
