Одним из самых «горячих» методов в Интернете сегодня является прокрутка параллакса. Мы все были на тех сайтах, где вы вращаете колесо прокрутки на вашей мыши, и содержимое на странице перемещается вверх и вниз или по странице при вращении колеса мыши.
Для тех, кто не знаком с веб-дизайном и графическим дизайном, этот метод может быть чрезвычайно трудным для достижения из-за необходимого размера CSS.
Если это вас описывает, существует ряд приложений, которые могут просто понравиться графическим художникам. В основном они используют знакомый подход макета страницы к веб-страницам, а это значит, что кодирования не много, если таковые имеются. Одним из приложений, которое действительно заняло известность, является Adobe Muse.
Работа, выполняемая графическими профессионалами с использованием Muse, довольно удивительна, и вы можете увидеть выборку того, что вы можете сделать, посетив Muse Сайт дня , Несмотря на то, что веб-профессионалы склонны считать Muse «своего рода« игрушкой », она также используется дизайнерами для создания мобильных и веб-прототипов, которые в конечном итоге будут переданы разработчикам в их команде.
Один метод, который невероятно легко выполнить с помощью Muse, - это прокрутка параллакса и, если вы хотите увидеть завершенную версию упражнения. Когда вы вращаете колесо прокрутки мыши, текст, кажется, перемещается вверх или вниз по странице, и изображения меняются.
Давайте начнем.
01 из 07Создание веб-страницы
Когда вы запустите Muse, нажмите Новый сайт ссылка на сайт. Это откроет Новые свойства сайта, Этот проект будет разработан для настольного приложения, и вы можете выбрать его в Первоначальный макет выпадающее меню. Вы также можете установить значения для количества столбцов, ширины желоба, полей и заполнения. В этом случае мы не были очень обеспокоены этим и просто нажали Хорошо.
Отформатировать страницу
Когда вы устанавливаете свойства сайта и нажимаете Хорошо вас отвезли в так называемое План Посмотреть. Eсть Главная страницы вверху и Главная страница в нижней части окна. Нам нужна только одна страница. Чтобы добраться до Design View, мы дважды щелкнули по главной странице, которая открыла интерфейс.
Слева находятся несколько основных инструментов, а справа - различные панели, используемые для управления содержимым на странице. В верхней части находятся свойства, которые могут быть применены к странице, или все, что выбрано на странице. В этом случае мы хотели иметь черный фон. Чтобы выполнить это, мы нажимаем на Заполнение браузера цветной чип и выбрал черный из Color Picker.
03 из 07Добавить текст на страницу
Следующий шаг - добавить текст на страницу. Мы выбрали Текстовый инструмент и вынул текстовое поле. Мы ввели слово «Добро пожаловать», и в свойствах Arial, 120 пикселей Белый. Центр согласован.
Затем мы переключились на инструмент «Выделение», нажали на текстовое поле и установили его Y позиция до 168 пикселей сверху. Когда текстовое поле все еще выбрано, мы открыли Выровнять панель и выровняли текстовое поле с центром.
Наконец, с выбранным текстовым полем мы удерживали Option / Alt а также сдвиг и сделал четыре копии текстового поля. Мы изменили текст и позицию Y каждой копии:
- To, 871
- Графика, 1621
- Программное обеспечение, 2371
Вы заметите, что при задании местоположения каждого текстового поля страница изменяется в соответствии с расположением текста.
04 из 07Добавить место для заметок
Следующий шаг - разместить изображения между текстовыми блоками.
Первый шаг - выбрать Инструмент Прямоугольник и нарисуйте наш ящик, который простирается от одной стороны страницы до другой. С выбранным прямоугольником мы устанавливаем его высота до 250 пикселей И его Y позиция до 425 пикселей, Планируйте, чтобы они всегда растягивались или сокращались до ширины страницы, чтобы разместить окно просмотра браузера пользователя. Для этого мы нажали 100% ширина в свойствах. То, что это делает, является серым от значения X и гарантирует, что изображение всегда будет на 100% ширины окна просмотра в браузере.
05 из 07Добавить изображения в закладки
Выбрав прямоугольник, мы нажали Заполнить ссылку - не цветной чип - и нажал кнопку Iчернила мага для добавления изображения в прямоугольник. в примерка области, мы выбрали Масштабироваться в соответствии и нажал центральная ручка в Позиция чтобы изображение масштабировалось от центра изображения.
Затем мы использовали Option / Alt-Shift-перетащить чтобы создать копию изображения между двумя первыми двумя текстовыми блоками, открыла панель Fill и поменяла изображение на другое. Мы сделали это для остальных двух изображений.
С изображениями на месте пришло время добавить движение.
06 из 07Добавить прокрутку Parallax
Существует несколько способов добавления прокрутки параллакса в Adobe Muse. Мы собираемся показать вам простой способ сделать это.
Открыв панель Fill, щелкните Вкладка прокрутки и, когда он откроется, нажмите Флажок «Движение».
Вы увидите значения для начальный а также Конечное движение, Они определяют, как быстро изображение перемещается относительно колеса прокрутки. Например, значение 1,5 будет перемещать изображение в 1,5 раза быстрее, чем колесо. Мы использовали значение 0 для блокировки изображений.
Горизонтальные и вертикальные стрелки определить направление движения.Если значения равны 0, изображения не будут сдвигаться независимо от того, какую стрелку вы нажимаете.
Среднее значение – Основная позиция - показывает точку, где изображения начинают двигаться. Линия над изображением начинается, для этого изображения, 325 пикселей от верхней части страницы. Когда свиток достигает этого значения, изображение начинает двигаться. Вы можете изменить это значение, изменив его в диалоговом окне или щелкнув и перетащив точку вверху строки вверх или вниз.
Повторите это для других изображений на странице.
07 из 07Тестирование браузера
На этом мы закончили. Первое, что мы сделали по очевидным причинам, - это выбрать Файл> Сохранить сайт, Чтобы проверить браузер, мы просто выбрали Файл> Страница предварительного просмотра в браузере, Это открыло браузер нашего компьютера по умолчанию, и, когда страница открылась, мы начали прокрутку.
