Një nga teknikat "më të nxehta" në internet sot është scrolling parallax. Ne kemi qenë të gjithë në ato vende ku rrotulloni rrotullën e lëvizjes në mausin tuaj dhe përmbajtja në faqe lëviz lart e poshtë ose në të gjithë faqen kur ju rrotulloheni timonin e miut.
Për ata të rinj të dizajnit të internetit dhe dizajnit grafik, kjo teknikë mund të jetë jashtëzakonisht e vështirë për t'u arritur për shkak të sasisë së CSS që kërkohet.
Nëse kjo ju përshkruan, ka një numër aplikacionesh që mund të apelojnë vetëm tek artistët grafikë. Ata në thelb përdorin një qasje të njohur të faqeve të faqeve në faqet e internetit, që do të thotë se nuk është shumë, nëse ka ndonjë, kodimi është i përfshirë. Një aplikacion i cili me të vërtetë ka rënë në dukje është Adobe Muse.
Puna që bëhet nga grafika duke përdorur Muse është mjaft e mahnitshme dhe mund të shihni një mostër të asaj që mund të bëni duke vizituar faqen Muse të Ditës . Megjithëse profesionistët e web-it kanë tendencën ta konsiderojnë Muse-in si një lloj lodhjeje, ajo po përdoret gjithashtu nga projektuesit për të krijuar prototipa të lëvizshme dhe të internetit që do t'u jepen përfundimisht zhvilluesve të ekipit të tyre.
Një teknikë që është jashtëzakonisht e lehtë për t'u realizuar me Muse është parallax scrolling dhe, nëse doni të shihni versionin përfundimtar të stërvitjes Ne do të ecim nëpër, vendosni shfletuesin tuaj në këtë faqe. Kur rrotulloni rrotullën e lëvizjes së miut, teksti duket se lëviz lart ose poshtë në faqe dhe imazhet ndryshojnë.
Le të fillojmë.
01 nga 07
Krijo një Faqe Web
Kur nisni Muse klikoni lidhjen e re të sitit . Kjo do të hapë Prona të reja të Faqes . Ky projekt do të dizajnohet për një aplikacion desktop dhe ju mund ta zgjidhni në menynë e zbritjes Fillestare Layout . Gjithashtu mund të caktoni vlerat për numrin e kolonave, Gjerësinë e Gjerësisë, Margjinave dhe Mbushjen. Në këtë rast, ne nuk u shqetësuam shumë për këtë dhe thjeshtë klikuam OK .
02 nga 07
Formoni Faqe
Kur vendosni pronat e faqes dhe klikuat OK, u morët në atë që quhet Plan view. Ekziston një Faqja Faqja në krye dhe një Faqe Master në pjesën e poshtme të dritares. Na duhej vetëm një faqe. Për të shkuar te Pamja e Dizajnit, ne dy herë e klikuam në faqen Kryesore e cila hapi ndërfaqen.
Në të majtë janë disa vegla bazë dhe në të djathtë janë një sërë panelesh që përdoren për të manipuluar përmbajtjen në faqe. Së bashku me të lartë janë pronat, të cilat mund të aplikohen në faqe, ose ndonjë gjë të zgjedhur në faqe. Në këtë rast, donim të kishim një sfond të zi. Për të arritur këtë, ne klikojmë në çipin e ngjyrës së Plotësimit të Shfletuesit dhe zgjodhëm zezën nga përzgjedhësi i ngjyrave.
03 nga 07
Shto tekst në faqe
Hapi tjetër është të shtoni një tekst në faqe. Ne kemi përzgjedhur Tekstin dhe kemi nxjerrë një kuti teksti. Ne kemi hyrë në fjalën "Mirë se vini" dhe, në Prona të vendosur tekstin në Arial, 120 pixels White. Qendra e harmonizuar.
Ne pastaj kaloi në mjet Selection, klikuar në Textbox dhe vendosur pozitën e saj Y në 168 pixels nga lartë. Me kutinë e tekstit të zgjedhur ende, ne hapëm panelin e Align dhe përafruam kutinë e tekstit në qendër.
Së fundi, me kutinë e tekstit të zgjedhur, mbajtëm çelësat Option / Alt dhe Shift dhe bëmë katër kopje të kutisë së tekstit. Ne kemi ndryshuar tekstin dhe pozitën Y të secilës kopje në:
- Për, 871
- Grafikë, 1621
- Software, 2371
- @ Rreth, 3181
Ju do të vini re, ndërsa vendosni vendndodhjen e secilës kuti teksti, faqja ndryshon për të akomoduar vendndodhjen e tekstit.
04 nga 07
Shtoni mbajtësit e hapësirës së imazhit
Hapi tjetër është të vendosni imazhe ndërmjet blloqeve të tekstit.
Hapi i parë është që të zgjidhni Mjetin Rectangle dhe të vizatoni kutinë tonë që shtrihet nga njëra anë e faqes në tjetrën. Me drejtkëndëshin e përzgjedhur, ne vendosëm lartësinë e tij në 250 piksele dhe pozicioni Y në 425 piksele . Plani është që ata të jenë gjithmonë shtrirë ose të kontraktohen me gjerësinë e faqes për të përshtatur shfletuesin e shfletuesit të një përdoruesi. Për të arritur këtë, ne klikuam butonin 100% gjerësi në Properties. Çfarë bën kjo është gri nga vlera X dhe për të siguruar që imazhi është gjithmonë 100% i gjerësisë së shikimit në një shfletues.
05 e 07
Shtoni imazhe në vendmbajtësit e imazhit
Me zgjedhjen e drejtkëndëshe ne klikuam linkun e Plotësimit - jo Chipin e Ngjyrave - dhe klikuam Bojë magji për të shtuar një imazh në drejtkëndësh. Në zonën e Montimit , ne zgjodhëm Scale To Fit dhe klikuam trajtën e qendrës në zonën e Pozicionit për të siguruar që imazhi të jetë i shkallëzuar nga qendra e imazhit.
Tjetra, kemi përdorur teknikën Option / Alt-Shift-drag për të krijuar një kopje të imazhit midis dy blloqeve të para të tekstit, hapi panelin e Plotësimit dhe ndryshoi imazhin për një tjetër. Ne e bëmë këtë edhe për dy imazhet e mbetura.
Me imazhe në vend, është koha për të shtuar mocionin.
06 nga 07
Shtoni Parallax Scrolling
Ka disa mënyra për të shtuar scrolling parallax në Adobe Muse. Ne do t'ju tregojmë një mënyrë të thjeshtë për ta bërë këtë.
Me panelin e Plotësoni të hapur, klikoni butonin Shkoni dhe, kur të hapet, klikoni kutinë e kontrollit të lëvizjes .
Ju do të shihni vlerat për Mocionin Fillestar dhe Përfundimtar . Këto përcaktojnë sa shpejt lëviz imazhi në lidhje me Wheel Wheel. Për shembull, një vlerë prej 1.5 do të lëvizë imazhin 1.5 herë më shpejt se rrota. Ne kemi përdorur një vlerë prej 0 për të bllokuar imazhet në vend.
Shigjetat horizontale dhe vertikale përcaktojnë drejtimin e lëvizjes. Nëse vlerat janë 0, imazhet nuk do të lëvizin pavarësisht nga shigjeta që ju klikoni.
Vlera e mesme - Pozicioni kryesor - tregon pikën ku imazhet fillojnë të lëvizin. Linja mbi imazhin fillon, për këtë imazh, 325 piksela nga maja e faqes. Kur rrotullimi arrin atë vlerë, imazhi fillon të lëvizë. Ju mund ta ndryshoni këtë vlerë duke ndryshuar atë në kutinë e dialogut ose duke klikuar dhe zvarritur pikën në krye të vijës ose lart ose poshtë.
Përsëriteni këtë për imazhet e tjera në faqe.
07 i 07
Test i shfletuesit
Në këtë pikë, ne ishim mbaruar. Gjëja e parë që ne bëmë, për arsye të dukshme, ishte të zgjidhej File> Save Site . Për testin e shfletuesit, ne thjesht zgjodhëm File> Preview Page in Browser . Kjo hapi shfletuesin e parazgjedhur të kompjuterit dhe, kur hapet faqja, ne filluam të lëvizim.