Адзін з самых «гарачых» метадаў у Інтэрнэце сёння з'яўляецца паралакс скролінг. Мы ўсе былі ў тых месцах, дзе вы круціць кола пракруткі мышы і ўтрыманне на старонцы рухаецца уверх і ўніз ці ўпоперак старонкі пры кручэнні колы мышы.
Для тых, хто пачатковец у вэб-дызайну і графічнага дызайну, гэты метад можа быць надзвычай цяжка дасягнуць з-за колькасці CSS патрабуецца.
Калі гэта ставіцца да вас, існуе цэлы шэраг прыкладанняў, якія могуць проста заклік да малявальшчык. Яны ў асноўным выкарыстоўваюць знаёмыя макет старонкі падыход да вэб-старонкам, а гэта значыць, там не шмат, калі такія маюцца, кадаваньне ўдзельнічае. Адно з прыкладанняў, сапраўды ўзляцела ў вядомасць з'яўляецца Adobe Muse.
Праца робіцца графікі профі выкарыстаннем Muse вельмі дзіўна , і вы можаце ўбачыць выбаркі таго , што вы можаце зрабіць, наведаўшы Muse Сайт дня. Хоць вэб-профі, як правіла, разглядаюць Muse як свайго роду «завадныя цацкі», ён таксама выкарыстоўваецца дызайнерамі для стварэння мабільных і вэб-прататыпы, якія будуць у канчатковым рахунку, перадаваліся ад распрацоўшчыкаў на сваю каманду.
Адзін з метадаў, якія неверагодна лёгка зрабіць з музай паралакс пракруткі і, калі вы хочаце ўбачыць скончаную версію практыкаванні мы будзем хадзіць праз, накіруйце свой браўзэр на гэтую старонку. Пры каціць кола прагорткі вашай мышы, тэкст, здаецца, рухацца ўверх ці ўніз старонкі і малюнкі змяняюцца.
Давайце пачнем.
01 07
Стварэнне вэб-старонкі
Пры запуску Muse націсніце на спасылку Новы сайт. Гэта адкрые новыя ўласцівасці сайта. Гэты праект будзе распрацаваны для настольнага прыкладання , і вы можаце выбраць яго ў першапачатковай кампаноўкі ўсплываючае меню. Вы можаце таксама ўсталяваць значэння для ліку слупкоў, вадасцёкі Шырыні, палёў і водступаў. У гэтым выпадку, мы не вельмі занепакоеныя гэтым і проста націснулі кнопку OK.
02 ад 07
адфарматуйце старонку
Пры наладзе уласцівасцяў сайта і націснуў кнопку OK вы былі прынятыя да таго , што называецца выгляд плана. Існуе хатняя старонка ў верхняй часткі і майстар - старонка ў ніжняй частцы акна. Мы патрэбныя толькі адну старонкі. Для таго, каб дабрацца да Design View, мы двойчы пстрыкнулі Галоўную старонку, якая адкрывала інтэрфейс.
Злева некалькі асноўных інструментаў, а справа мноства панэляў, якія выкарыстоўваюцца для кіравання зместам на гэтай старонцы. У верхняй з'яўляюцца ўласцівасцямі, якія могуць быць ужытыя да старонкі, або што-небудзь, выбраныя на гэтай старонцы. У гэтым выпадку, мы хацелі б мець чорны фон. Для дасягнення гэтай мэты , мы націскаем на каляровы фішцы Browser Запаўненьне й абраў чорны з палітры кветак.
03 з 07
Дадаць тэкст на старонку
Наступным крокам з'яўляецца даданне тэксту на старонцы. Мы выбралі інструмент Text Tool і вынялі тэкставае поле. Мы ўвайшлі ў слова «Welcome» і ва ўласцівасцях ўсталяваць тэкст Arial, 120 пікселяў белага. Цэнтр выраўноўванне.
Затым мы перайшлі да інструмента Selection, націснулі на Textbox і ўсталюйце Y пазіцыю 168 пікселяў ад верхняй часткі. З тэкставае поле ўсё яшчэ абраная, мы адкрылі панэль Align і выраўноўвалі тэкставае поле ў цэнтры.
Нарэшце, з тэкстам сцяжком, мы правялі ўніз Option / Alt і клавішу Shift ключы і зрабілі чатыры копіі тэкставага поля. Мы змянілі тэкст і становішча Y кожнай копіі:
- Каб, 871
- Графіка, 1621
- Праграмнае забеспячэнне, 2371
- @ About.com, 3181
Вы заўважыце, як вы ўсталяваць месцазнаходжанне кожнага тэкставага поля, старонка змяняецца, каб прыстасаваць размяшчэнне тэксту.
04 з 07
Дадаць запаўняльнікі малюнка
Наступны крок павінен змясціць выявы паміж тэкставымі блокамі.
Першы крок , каб выбраць інструмент Прастакутнік і намалюйце нашу скрынку , якая цягнецца з аднаго боку старонкі на іншую. Абраны прастакутнік, мы ўсталёўваем яго вышыню да 250 пікселяў і яго Y пазіцыі на 425 пікселяў. План складаецца ў тым, каб яны заўсёды расцягвацца або сціскацца па шырыні старонкі для размяшчэння браўзэра краявіднага экрана карыстальніка. Для дасягнення гэтай мэты , мы націснулі кнопку шырынёй 100% ва ўласцівасцях. Што гэта робіць шэрым значэнне X і забяспечыць малюнак заўсёды 100% шырыні акна прагляду ў браўзэры.
05 07
Дадаць выявы ў Местозаполнители малюнкаў
Пры выбары прастакутнік мы націснулі на спасылку Fill - не колер Чып - і націснулі я маг чарніла , каб дадаць малюнак у прамавугольніку. У вобласці Месцы мы абралі маштабаваць і націснулі цэнтральную ручку ў зоне ўстаноўкі , каб забяспечыць малюнак маштабуецца ад цэнтра малюнка.
Далей, мы выкарыстоўвалі метад Option / Alt-Shift-перацягнуць , каб стварыць копію малюнка паміж першымі двума тэкставымі блокамі, адкрылі панэль залівання і памяняць месца малюнкаў на іншую. Мы зрабілі гэта для астатніх двух малюнкаў, а таксама.
З малюнкамі на месцы, прыйшоў час дадаць рух.
06 з 07
Дадаць Parallax Scrolling
Ёсць некалькі спосабаў дадання паралакс пракруткі ў Adobe Muse. Мы збіраемся паказаць вам просты спосаб зрабіць гэта.
З Заліваннем панэллю адкрыта, адкрыйце ўкладку пракруткі і, калі яна адкрыецца, націсніце Motion сцяжок.
Вы ўбачыце значэння для пачатковай і канчатковага Motion. Яны вызначаюць, наколькі хутка малюнак перамяшчаецца па адносінах да кола прагорткі. Напрыклад, значэнне 1,5 будзе перамяшчаць малюнак у 1,5 разы хутчэй, чым кола. Мы выкарыстоўвалі значэнне 0, каб блакаваць малюнка на месцы.
Стрэлкі Гарызантальная і вертыкальная вызначаюць кірунак руху. Калі значэнні роўныя 0 малюнка не зрушыцца з месца незалежна ад стрэлка націску кнопкі.
Сярэдзіна каштоўнасна Key Position - паказвае кропку , дзе выявы пачынаюць рухацца. Лініі над выявай пачынаецца, для гэтага малюнка, 325 пікселяў ад верхняй частцы старонкі. Калі скрутак дасягае гэтага значэння малюнак пачынае рухацца. Вы можаце змяніць гэтае значэнне, альбо змяніць яго ў дыялогавым акне, або пстрыкнуўшы і перацягнуўшы кропку ў верхняй часткі лініі уверх ці ўніз.
Паўтарыце гэтую працэдуру для іншых малюнкаў на старонцы.
07 07
Browser Test
На дадзены момант, мы былі скончаны. Першае , што мы зрабілі, па зразумелых прычынах, было выбраць File> Save Site. Для тэставання браўзэра, мы проста абраны Файл> Папярэдні прагляд старонкі ў браўзэры. Гэта адкрыла браўзэр нашага кампутара па змаўчанні і, калі старонка адкрыта, мы пачалі прагортку.