Једна од "најтоплијих" техника на вебу данас је паралаксално скроловање. Сви смо били на оним местима на којима ротирате точкић за померање миша, а садржај на страници се креће нагоре или надоле преко странице док ротирате точкић миша.
За оне нове на веб дизајн и графички дизајн, ова техника може бити изузетно тешко постићи због количине потребног ЦСС-а.
Ако вас то описује, постоји велики број апликација које се могу позивати само графичким уметницима. Они у основи користе познати изглед странице на веб странице, што значи да нема много, ако постоји, кодирања. Једна апликација која је заиста истакнута у виду је Адобе Мусе.
Рад који обављају графичке професионалци коришћењем Музеја је прилично невероватно и можете видети узорак онога што можете учинити посећујући Мусе Сите оф тхе Даи . Иако веб професионалци сматрају да је Мусе нека врста "играчака за ветру", дизајнери га користе и за креирање мобилних и веб прототипова који ће на крају бити предати програмерима у њиховом тиму.
Једна техника која је невероватно лако постићи са Мусе је паралаксна померање и, ако желите да видите завршену верзију вежбе Пређемо кроз, усмерите ваш претраживач на ову страницу. Кад окрећете точкић миша, текст се чини да се креће нагоре или надоле, а слике се мењају.
Хајде да почнемо.
01 од 07
Креирајте Веб страницу
Када покренете Мусе кликните на линк за Ново место . Ово ће отворити својства нове локације . Овај пројекат ће бити дизајниран за десктоп апликацију и можете га одабрати у попустном менију Инитиал Лаиоут . Такође можете подесити вредности за број колона, ширине жљебова, маргина и паддинга. У овом случају, нисмо били страшно забринути за ово и једноставно кликнули ОК .
02 од 07
Форматирајте страницу
Када поставите својства сајта и кликнете ОК, ви сте одведени у оно што се зове План поглед. Постоји Главна страница на врху и Главна страница на дну прозора. Требало нам је само једна страница. Да бисте дошли до Десигн Виев, двапут смо кликнули на почетну страницу која је отворила интерфејс.
На левој страни налази се неколико основних алата, а десно су разне панеле које се користе за манипулацију садржајем на страници. На врху су особине која се могу применити на страницу или било шта одабрано на страници. У овом случају желели смо да имамо црну позадину. Да би ово постигли, кликнули смо на обојени чип Бровсер Филл и изабрали црну од Цолор Пицкер-а.
03 од 07
Додајте текст на страницу
Следећи корак је додавање неког текста на страницу. Изабрали смо текстуалну алатку и извадили оквир за текст. Ушли смо у реч "Добро дошли" и, у "Својини" поставили текст на Ариал, 120 пикелс Вхите. Центар поравнат.
Затим смо прешли на алатку Селецтион, кликнули на Тектбок и поставили И позицију на 168 пиксела са врха. Са још увек изабраним текстом, отворили смо панел Алигн и поравнули текстуално поље са центром.
На крају, уз одабрано поље за текст држали смо тастере Оптион / Алт и Схифт и направили четири копије поља за текст. Променили смо текст и позицију И сваке копије на:
- То, 871
- Графика, 1621
- Софтвер, 2371
- @ Абоут.цом, 3181
Приметићете, пошто сте поставили локацију сваког поља за текст, страница мења величину да би се прилагодила локација текста.
04 од 07
Додајте држаче слика
Следећи корак је постављање слика између текстуалних блокова.
Први корак је одабир Алатке правоугаоника и нацртати нашу кутију која се протеже са једне стране странице на другу. Са изабраним правоугаоницом, поставили смо висину до 250 пиксела и његову позицију И на 425 пиксела . План је да се увек развијају или се слажу са ширином странице како би се прилагодио погледу претраживача прегледача корисника. Да бисмо остварили ово, кликнули смо дугме 100% ширине у Пропертиес. Оно што ово чини је сива из Кс вриједности и осигурати да је слика увијек 100% ширине приказа у претраживачу.
05 од 07
Додајте слике у слике носилаца слике
Са изабраним правоугаоником кликнули смо везу Попуњавање - не Цолор Цхип - и кликнули на мастило И маге да додам слику у правоугаоник. У области Фиттинг , изабрали смо Сцале То Фит и кликнули на средишњу дршку у подручју Позиције да би се осигурало да се слика помјери из центра слике.
Затим смо користили технику Оптион / Алт-Схифт-драг да креирамо копију слике између прва два текстуална блока, отворимо панел за попуњавање и заменимо слику за другу. Урадили смо то и за преостале две слике.
Са сликама на месту, време је да додате покрет.
06 од 07
Додајте Параллак Сцроллинг
Постоји низ начина додавања параллакс скролирања у Адобе Мусеу. Показаћемо вам једноставан начин да то урадите.
Када је панел отворен, кликните на сцролл картицу и, када се отвори, кликните на оквир за потврду Мотион .
Видећете вредности за почетни и завршни захтев . Они одређују колико брзо се слика помера у односу на точкић за померање. На пример, вредност 1,5 ће преместити слику 1,5 пута брже од точка. Користили смо вредност од 0 за закључавање слика на месту.
Хоризонталне и вертикалне стрелице одређују правац кретања. Ако су вредности 0, слике се неће пребацивати без обзира на коју стрелицу кликнете.
Средња вредност - Кључни положај - приказује тачку у којој се слике крећу. Линија изнад слике почиње, за ову слику, 325 пиксела са врха странице. Када свитак достигне ту вредност, слика почиње да се помера. Можете променити ову вриједност промјеном у дијалогу или кликом и повлачењем тачке на врху линије, горе или доле.
Поновите ово за остале слике на страници.
07 од 07
Бровсер Тест
У овом тренутку смо завршили. Прва ствар коју смо урадили, из очигледних разлога, је био одабир Датотека> Сачувај локацију . За тестирање претраживача једноставно смо изабрали Филе> Превиев Паге у прегледачу . Ово је отворило подразумевани прегледач рачунара и када смо отворили страницу, почели смо да се померамо.