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