Эффекты прокрутки (параллакс)

Эффекты прокрутки (параллакс)

Эффекты прокрутки в Adobe Muse

Этот урок о том, как применить эффекты прокрутки для создания параллакс эффекта на сайте в программе Adobe Muse.
На одном простом примере с перемещением фона и текстового фрейма вы увидите как можно применять эффекты прокрутки, как их настраивать и что происходит при тех или иных настройках эффекта. Довольно часто встречающийся вопрос по эффектам прокрутки (параллаксу) освещается в данном видео. Просто, легко, доступно.

Смотрите видеоурок:

Эффекты прокрутки. Подготовка 

Это мой новый видео урок, в котором мы рассмотрим эффекты прокрутки. Рассматривать эффекты прокрутки мы будем на одном примере. Я открываю программу, здесь у меня создан такой вот проект – здесь у меня два прямоугольного блока  с картинками, третий прямоугольник у нас с градиентом идёт до самого конца сайта. И есть надпись, расположенная в текстовом блоке с прозрачным задним фоном и простым текстом.

Эффекты прокрутки находятся у нас в правой части программы, в разделе «эффекты прокрутки».  Нажимаете сюда и у нас появляется такое вот окошко,  где мы можем назначать  для блоков различные эффекты. Сейчас у меня никакие эффекты прокрутки на блоке не назначены. Если мы просмотрим сайт в режиме просмотра, то у нас будет просматриваться страница со всеми её блоками, последовательно сменяющими друг друга.

Эффекты прокрутки. Основные параметры и настройка.

Сейчас мы попробуем установить эффекты прокрутки для текстового блока, заднего фона первого экрана. Делаем так, что бы про прокрутке наш текст уезжал вниз, а не в верх, а задний фон уезжал вверх медленнее, чем мы прокручиваем страницу в браузере.

Основные параметры.

Идём в режим дизайна этой страницы, давайте для начала выделим текстовый блок, и включим ему «Перемещение». Ставлю тут флажок и нам становятся доступны настройки для перемещения данного блока. К тому же, к данному блоку появился такой вот Т-образный маркер.  Этот маркер разделяет начальное и конечное перемещение. Я поставлю этот блок на место, а маркер выставлю ровно по верхней границе своей страницы.

Настройка перемещения блоков.

Далее. Начальное перемещение нас не столько интересует, сколько конечное перемещение. Поэтому, мы начальное перемещение выставляем всё на ноль, а конечное перемещение (мы хотим, что бы наш блок двигался вверх), я нажимаю здесь кнопку «вниз», со скоростью по вертикали немного пониже, чем скорость прокрутки в браузере.  Я выставляю значение меньше единицы (0,5), это означает, что мой текстовый блок будет уезжать при прокрутке страницы вниз, со скоростью в два раза меньше, чем скорость прокрутки страницы в браузере.

Я выделяю графический блок заднего фона и точно так же устанавливаю ему флажок «перемещение». Для того, что бы увидеть Т-образный маркер (он у нас находится вверху), мне придется сдвинуть этот блок немного вниз , и я передвигаю этот маркер в самое начало этого графического блока. То есть, он у меня совпадает с началом графического блока. Ставлю фон на место и, поскольку картинка у меня растянута по ширине страницы, по ширине браузера, у меня отсутствуют параметры перемещения влево-вправо. Каждого перемещения – начального и конечного.

И так, я хочу, что бы при прокрутке страницы в браузере блог графический уезжал вверх, но медленнее, чем я прокручиваю страницу. Для этого конечное перемещение я устанавливаю «вверх» по умолчанию, но ставлю скорость в два раза меньше, чем скорость прокрутки страницы в браузере.

Эффекты прокрутки. Просмотр.

Заходим в режим «просмотр», страница у меня обновилась и при прокрутке страницы мы видим, что наш текстовый блок поехал вниз, а задний фон экрана – вверх. Он спускается медленнее, чем на него наползает следующий блок с картинкой.

Таким вот образом мы сделали некий эффект параллакса, эффекта прокрутки в программе Adobe Muse.

На самом деле, эффекты прокрутки можно использовать для самых различных вариантов создания такой вот анимации. Например, если мы для текстового блока выставим эффект прокрутки и для перемещения вниз назначим ему ещё и перемещение в одну из сторон, например вправо, то при просмотре наш тестовый блок будет уезжать не только вниз, но и так же перемещаться вправо.

Вот такие интересные эффекты позволяет нам сделать эффект прокрутки в программе Adobe Muse.

А на этом мы заканчиваем данный урок. Если Вам понравился данный урок, подписывайтесь на мой канал, ставьте лайки и пишите комментарии внизу.

Так же не забывайте, что вы всегда можете подписаться на мою рассылку и получить 49 бесплатных виджетов и 3 шаблона для программы Adobe Muse. Нажимайте на ссылку под этим видео. На этом я прощаюсь с вами до следующих уроков. До связи. Пока.

Автор видеоурока:
Дмитрий Шаповалов

Оставить комментарий

Подтвердите, что Вы не бот — выберите самый большой кружок: