Една од "најжешките" техники на веб денес е паралаксата лизгање. Сите сме биле на оние сајтови каде што го ротирате тркалцето на глувчето и содржината на страницата се движи нагоре и надолу или низ страната додека го ротирате тркалото за глувчето.
За оние нови за веб дизајн и графички дизајн, оваа техника може да биде премногу тешко да се постигне поради количината на CSS потребна.
Ако тоа ви опишува, постојат голем број на апликации кои само може да поднесе жалба до графички уметници. Тие во основа користат познат приказ на распоред на страници на веб-страници, што значи дека нема многу, ако има, кодирање. Една апликација која навистина е нагласена во истакнатост е Adobe Muse.
Работата што ја вршат графичките професионалци со помош на Muse е сосема неверојатна и можете да видите пример за тоа што можете да направите со посета на страницата на Muse на денот . Иако веб провајдерите имаат тенденција да ја сметаат за муза како некаква "играчка за ветер", таа исто така се користи од дизајнерите за создавање мобилни и веб прототипови кои на крајот ќе им бидат предадени на програмерите на нивниот тим.
Една техника што е неверојатно лесно да се постигне со Muse е паралаксата лизгање и, ако сакате да ја видите завршената верзија на вежбата, ќе одиме преку, посочете го вашиот прелистувач на оваа страница. Кога ќе го свртите тркалото за движење на глувчето, текстот се чини дека се движи нагоре или надолу по страницата и сликите се менуваат.
Ајде да почнеме.
01 од 07
Креирајте веб-страница
Кога ќе ја стартувате Muse, кликнете на линкот New Site . Ова ќе ги отвори својствата на нова страница . Овој проект ќе биде дизајниран за десктоп апликација и можете да го изберете во почетното мени за почетна распределба . Исто така можете да ги поставите вредностите за бројот на колони, ширина на оската, маргини и облоги. Во овој случај, ние не бевме ужасно загрижени за ова и едноставно кликнав во ред .
02 од 07
Форматирајте ја страницата
Кога ќе ги поставите својствата на страницата и кликнете ОК, ќе бидете префрлени на она што се вика План . На почеток има Главна страница и Главна страница на дното на прозорецот. Требаше само една страница. За да стигнете до Дизајн Преглед, двојно кликнавме на почетната страница која го отвори интерфејсот.
На левата страна се неколку основни алатки и на десната страна се различни панели кои се користат за манипулација со содржината на страната. На врвот се својствата, кои можат да се применат на страницата или нешто избрано на страната. Во овој случај, сакавме да имаме црна позадина. За да го постигнеме ова, кликнуваме на Chip Browser Fill боја и избирате црно од Color Picker.
03 од 07
Додај текст на страната
Следниот чекор е да додадете некој текст на страницата. Избравме текстуална алатка и извадивме поле за текст. Влеговме во зборот "Добредојдовте" и, во својствата наместете го текстот во Arial, 120 пиксели Бело. Центриран.
Ние потоа се префрлиме на алатката за избор, кликнете на полето за текст и поставете ја својата Y позиција на 168 пиксели од врвот. Со текстуалното поле сè уште селектирано, го отворивме панелот за усогласување и порамнувајќи го полето за текст до центарот.
Конечно, со избраното поле за текст ги одржавме копчињата Option / Alt и Shift и направивме четири копии од полето за текст. Ние го сменивме текстот и позицијата Y од секоја копија на:
- Да, 871
- Графика, 1621
- Софтвер, 2371
- @ About.com, 3181
Ќе забележите, кога ќе ја поставите локацијата на секое поле за текст, страницата ќе се промени за да се прилагоди на локацијата на текстот.
04 од 07
Додај сликички
Следниот чекор е да се стават слики помеѓу текстуалните блокови.
Првиот чекор е да се избере алатката Rectangle и да се повлече нашата кутија која се протега од една страна на страната на другата страна. Со избраниот правоаголник, ја поставуваме својата висина до 250 пиксели, а нејзината позиција Y до 425 пиксели . Планот е да ги имаат секогаш да се водат или да се склопат кон широчината на страницата за да се приспособат визирот на пребарувачот на корисникот. За да го постигнеме ова, ние го кликнавме копчето за 100% ширина во Properties. Она што тоа го прави е сива од вредноста X и за да се обезбеди дека сликата е секогаш 100% од ширината на преглед во прелистувачот.
05 од 07
Додај слики на сликите
Со избраниот правоаголник ја кликнавме врската "Пополнете - не чип на боја" - и го кликнав мастилото за мастило за да додадам слика во правоаголникот. Во областа за фитинг , избравме Scale To Fit и ја кликнавме централната рачка во областа Позиција за да се осигуриме дека сликата е намалена од центарот на сликата.
Потоа, ја искористивме техниката Option / Alt-Shift-drag за да создадеме копија од сликата помеѓу првите два текстуални блока, ја отворивме панел за пополнување и ја сменивме сликата за друга. Ова го правевме и за преостанатите две слики.
Со слики во место, време е да се додаде движењето.
06 од 07
Додај паралелање лизгање
Постојат неколку начини за додавање на паралаксата во Adobe Muse. Ќе ви покажеме едноставен начин за тоа.
Со панелот за пополнување отворете, кликнете на Scroll табот и, кога ќе се отвори, кликнете на полето за избор на движење .
Ќе видите вредности за иницијално и крајно движење . Тие одредуваат колку брзо се движи сликата во однос на тркалцето за лизгање. На пример, вредноста од 1,5 ќе ја премести сликата 1,5 пати побрзо од тркалото. Ние искористивме вредност од 0 за да ги заклучиме сликите во место.
Хоризонталната и вертикалната стрелка ја одредува правецот на движењето. Ако вредностите се 0, сликите нема да се движат без оглед на тоа која стрелка ќе кликнете.
Средната вредност - Key Position - ја покажува точката каде што сликите почнуваат да се движат. Линијата над сликата започнува, за оваа слика, 325 пиксели од врвот на страницата. Кога свитокот ќе ја достигне таа вредност, сликата почнува да се движи. Можете да ја промените оваа вредност со тоа што ќе ја промените во полето за дијалог или со кликање и влечење на точката на врвот на линијата, нагоре или надолу.
Повторете го ова за другите слики на страницата.
07 од 07
Тест за прелистувач
Во овој момент, бевме завршени. Првото нешто што го направивме, поради очигледни причини, беше да изберете File> Save Site . На тестот за прелистувач, едноставно ја избравме датотеката> Прегледна страница во прелистувачот . Ова го отвори стандардниот прелистувач на компјутерот и, кога се отвори страницата, почнавме да се движиме.