Една от "най-горещите" техники в мрежата днес е превъртането на паралакс. Всички ние бяхме на тези сайтове, в които завъртите скролното колело на мишката и съдържанието на страницата се движи нагоре и надолу или през страницата, докато въртите колелото на мишката.
За тези, които са нови за уеб дизайна и графичния дизайн, тази техника може да бъде изключително трудна за постигане, поради необходимия брой CSS.
Ако това ви описва, има редица приложения, които могат да се харесат на графични артисти. Те основно използват познат подход за оформление на страниците на уеб страниците, което означава, че няма кой да е кодиране. Едно от приложенията, които наистина се превърнаха в известност, е Adobe Muse.
Работата, направена от графичните професионалисти, използващи Muse, е доста невероятна и можете да видите пример за това, което можете да направите, като посетите Muse Site of The Day . Въпреки че уеб-специалистите са склонни да считат Муза за някаква "играчка на вятъра", тя също се използва от дизайнерите за създаване на мобилни и уеб прототипи, които в крайна сметка ще бъдат предадени на разработчиците от техния екип.
Една техника, която е невероятно лесна за изпълнение с Muse, е превъртането на паралакс и ако искате да видите завършената версия на упражнението Ние ще се разхождаме, насочваме вашия браузър към тази страница. Когато завъртите ролката за превъртане на мишката, текстът изглежда се движи нагоре или надолу по страницата и изображенията се променят.
Да започваме.
01 от 07
Създайте уеб страница
Когато пуснете Muse, кликнете върху връзката Нов сайт . Това ще отвори нови свойства на сайта . Този проект ще бъде създаден за настолни приложения и можете да го изберете в падащото меню Initial Layout . Можете също така да зададете стойностите за броя на колоните, ширината на канавката, полетата и подложката. В този случай не бяхме ужасно загрижени за това и просто кликнахме върху OK .
02 от 07
Форматирайте страницата
Когато зададете свойствата на сайта и кликнехте върху ОК, вие бяхте отведени до това, което се нарича план view. Има начална страница в горната част и главна страница в долната част на прозореца. Нуждаем се само от една страница. За да стигнете до Design View, щракнете двукратно върху началната страница, която отвори интерфейса.
Вляво има няколко основни инструмента, а отдясно има различни панели, използвани за манипулиране на съдържанието на страницата. В горната част има свойствата, които могат да бъдат приложени към страницата или нещо, което е избрано на страницата. В този случай искахме да имаме черен фон. За да постигнете това, кликваме върху цветния чип " Бързо попълване" и изберете черното от цветовият селектор.
03 от 07
Добавяне на текст към страницата
Следващата стъпка е да добавите текст към страницата. Избрахме текстовия инструмент и изчертахме текстово поле. Въведохме думата "Добре дошли", а в Properties зададохме текста на Arial, 120 пиксела бял. Center Aligned.
След това превключихме на инструмента за избор, кликнахме върху текстовата кутия и зададохме позицията й на 168 пиксела отгоре. Докато текстовото поле все още беше избрано, отворихме панела "Подравняване" и подравняваме текстовото поле в центъра.
Накрая, с избраното текстово поле, задържахме клавишите Option / Alt и Shift и направихме четири копия на текстовото поле. Променихме текста и позицията "Y" на всяко копие на:
- Към, 871
- Графика, 1621
- Софтуер, 2371
- @ Usb.bg, 3181
Ще забележите, че като зададете местоположението на всяко текстово поле, страницата се преоразмерява, за да се помести местоположението на текста.
04 от 07
Добавяне на приставки за изображения
Следващата стъпка е да поставите изображения между блоковете на текста.
Първата стъпка е да изберете инструмента Rectangle и да изчертаете кутия, която се простира от едната страна на страницата до другата. При избрания правоъгълник зададохме височина до 250 пиксела, а неговата позиция - 425 пиксела . Планът е да ги накарате винаги да се простират или да се свиват с ширината на страницата, за да се приспособят към изгледа на браузъра на потребителя. За да постигнете това, кликнахме върху бутона 100% ширина в Properties. Това, което прави това, е сивата стойност X и да гарантира, че изображението винаги е 100% от ширината на прозореца в браузъра.
05 от 07
Добавяне на изображения към позициониращите изображения
С избрания правоъгълник кликнахме върху връзката "Попълване", а не върху цветния чип, и кликнахме върху мастилото за магии, за да добавим изображение в правоъгълника. В зоната за поставяне избрахме Scale To Fit и кликнахме върху централната ръкохватка в областта " Позиция" , за да гарантираме, че изображението е изместено от центъра на изображението.
След това използвахме техниката за опция / Alt-Shift, за да създадем копие на изображението между първите два текстови блока, да отворим панела Fill и да сменим изображението с друг. Направихме това и за останалите две изображения.
С изображенията на място, е време да добавите движението.
06 от 07
Добавете превъртане на Parallax
Има няколко начина за добавяне на превъртане на паралакс в Adobe Muse. Ще ви покажем един лесен начин да го направите.
С отворения панел за попълване кликнете върху раздела Скролиране и, когато се отвори, кликнете върху квадратчето за търсене Motion .
Ще видите стойности за началното и крайното движение . Те определят колко бързо се движи изображението по отношение на колелото за превъртане. Например, стойността от 1,5 ще премести изображението 1,5 пъти по-бързо от колелото. Използвахме стойност 0, за да заключим изображенията на място.
Хоризонталните и вертикалните стрелки определят посоката на движение. Ако стойностите са 0, изображенията няма да се покачат независимо от стрелката, която кликвате.
Средната стойност - Клавишна позиция - показва точката, в която изображенията започват да се движат. Линията над изображението започва, за това изображение, 325 пиксела от горната част на страницата. Когато превъртането достигне тази стойност, изображението започва да се движи. Можете да промените тази стойност, като я смените в диалоговия прозорец или като кликнете и преместите точката в горната част на линията нагоре или надолу.
Повторете това за останалите изображения на страницата.
07 от 07
Тест за браузъра
В този момент бяхме свършили. Първото нещо, което направихме, по очевидни причини, беше да изберете File> Save Site . За теста на браузъра, ние просто изберете File> Preview Page в Browser . Това отвори браузъра по подразбиране на компютъра ни и когато страницата се отвори, започнахме да превъртаме.