Една от "най-горещите" техники в мрежата днес е превъртането на паралакс. Всички ние бяхме на тези сайтове, в които завъртите скролното колело на мишката и съдържанието на страницата се движи нагоре и надолу или през страницата, докато въртите колелото на мишката.
За тези, които са нови за уеб дизайна и графичния дизайн, тази техника може да бъде изключително трудна за постигане, поради необходимия брой CSS.
Ако това ви описва, има редица приложения, които могат да се харесат на графични артисти. Те основно използват познат подход за оформление на страниците на уеб страниците, което означава, че няма кой да е кодиране. Едно от приложенията, които наистина се превърнаха в известност, е Adobe Muse.
Работата, извършена от графичните професионалисти, използващи Muse, е доста невероятна и можете да видите пример за това, което можете да направите, като посетите Muse Сайта на Деня , Въпреки че уеб-специалистите са склонни да считат Муза за някаква "играчка на вятъра", тя също се използва от дизайнерите за създаване на мобилни и уеб прототипи, които в крайна сметка ще бъдат предадени на разработчиците от техния екип.
Една техника, която е невероятно лесна за изпълнение с Muse, е превъртането на паралакс и, ако искате да видите завършената версия на упражнението. Когато завъртите ролката за превъртане на мишката, текстът изглежда се движи нагоре или надолу по страницата и изображенията се променят.
Да започваме.
01 от 07Създайте уеб страница
Когато пуснете Muse, кликнете върху Нов сайт връзка. Това ще отвори Нови свойства на сайта, Този проект ще бъде създаден за настолно приложение и можете да го изберете в Първоначално оформление падащо меню. Можете също така да зададете стойностите за броя на колоните, ширината на канавката, полетата и подложката. В този случай не бяхме ужасно загрижени за това и просто щракнахме Добре.
Форматирайте страницата
Когато зададете свойствата на сайта и кликнете Добре бяхте отведени до това, което се нарича план изглед. Има У дома страница в горната част и а Главна страница в долната част на прозореца. Нуждаем се само от една страница. За да стигнете до Design View, щракнете двукратно върху началната страница, която отвори интерфейса.
Вляво има няколко основни инструмента, а отдясно има различни панели, използвани за манипулиране на съдържанието на страницата. В горната част има свойствата, които могат да бъдат приложени към страницата или нещо, което е избрано на страницата. В този случай искахме да имаме черен фон. За да постигнете това, кликваме върху Попълване на браузъра цветен чип и изберете черно от инструмента Color Picker.
03 от 07Добавяне на текст към страницата
Следващата стъпка е да добавите текст към страницата. Избрахме Инструмент за текстове и извади текстова кутия. Въведохме думата "Добре дошли" и в Properties зададохме текста на Arial, 120 пиксела бяла. Center Aligned.
След това пренасочихме инструмента за избор, кликнахме върху текстовата кутия и зададохме него Позиция Y до 168 пиксели от горната. Докато текстовото поле все още беше избрано, отворихме Подравняване на панела и приведе текстовото поле в центъра.
Накрая, с избраното текстово поле, задържахме Вариант / Alt и изместване и направи четири копия на текстовото поле. Променихме текста и позицията "Y" на всяко копие на:
- Към, 871
- Графика, 1621
- Софтуер, 2371
Ще забележите, че като зададете местоположението на всяко текстово поле, страницата се преоразмерява, за да се помести местоположението на текста.
04 от 07Добавяне на приставки за изображения
Следващата стъпка е да поставите изображения между блоковете на текста.
Първата стъпка е да изберете Инструмент правоъгълник и изчертайте кутия, която се простира от едната страна на страницата до другата. С избрания правоъгълник сме задали неговия височина до 250 пиксела и е Позиция Y до 425 пиксела, Планът е да ги накарате винаги да се простират или да се свиват с ширината на страницата, за да се приспособят към изгледа на браузъра на потребителя. За да постигнем това, кликнали върху 100% ширина бутон в Properties. Това, което прави това, е сивата стойност X и да гарантира, че изображението винаги е 100% от ширината на прозореца в браузъра.
05 от 07Добавяне на изображения към позициониращите изображения
При избрания правоъгълник кликнахме върху Попълнете връзката - не цветния чип - и кликна върху "Аз"магнитно мастило за да добавите изображение към правоъгълника. В сглобяване район, ние избрахме Мащабът да се побере и кликна върху централна дръжка в позиция за да сте сигурни, че изображението е мащабирано от центъра на изображението.
След това използвахме Вариант / Alt-Shift-плъзгане за създаване на копие на изображението между първите два текстови блока, за отваряне на панела за попълване и за смяна на изображението за друго. Направихме това и за останалите две изображения.
С изображенията на място, е време да добавите движението.
06 от 07Добавете превъртане на Parallax
Има няколко начина за добавяне на превъртане на паралакс в Adobe Muse. Ще ви покажем един лесен начин да го направите.
С отворения панел за пълнене кликнете върху Раздел превъртане и когато се отвори, кликнете върху Motion checkbox.
Ще видите стойности за първоначален и Final Motion, Те определят колко бързо се движи изображението по отношение на колелото за превъртане. Например, стойността от 1,5 ще премести изображението 1,5 пъти по-бързо от колелото. Използвахме стойност 0, за да заключим изображенията на място.
Най- Хоризонтални и вертикални стрелки определя посоката на движение.Ако стойностите са 0, изображенията няма да се покачат независимо от стрелката, която кликвате.
Средната стойност – Ключова позиция - показва точката, в която изображенията започват да се движат. Линията над изображението започва, за това изображение, 325 пиксела от горната част на страницата. Когато превъртането достигне тази стойност, изображението започва да се движи. Можете да промените тази стойност, като я смените в диалоговия прозорец или като кликнете и преместите точката в горната част на линията нагоре или надолу.
Повторете това за останалите изображения на страницата.
07 от 07Тест за браузъра
В този момент бяхме свършили. Първото нещо, което направихме по очевидни причини, беше да изберем Файл> Запазване на сайта, За теста на браузъра, ние просто избрахме Файл> Преглед на страница в браузъра, Това отвори браузъра по подразбиране на компютъра ни и когато страницата се отвори, започнахме да превъртаме.
