Перейти к содержимому
  • Создание эффектов прокрутки фона

       (15 отзывов)

    Евгений Зубов
    • 57 4,25,6,20,3,26,27,28,29 4,6,32 https://creatura.club/uploads/monthly_2016_02/56b6358432e81_3.11.2_Sozdanie_effekta_prokrutki_fona_ego_nastroyki.mp4.b31fae400ac9043dd70f4c4bd20034dc.mp4 6 До 10 минут https://creatura.club/uploads/ Высокая сложность display: none;
      1. Пройдите тестирование для урока
      2. Оцените урок и сдайте задание

      В этом уроке мы познакомимся с основными эффектами прокрутки и их настройками в программе Adobe Muse. Для этого заходим в программу и рассмотрим настройки эффекта прокрутки на одном примере. У нас уже создан проект "Лупа", здесь создана одна страница. На странице присутствует один графический элемент, для которого создана заливка с помощью картинки и установлен эффект прокрутки для фона изображения. Когда мы прокручиваем страницу в браузере, задний фон перемещается, а объект просто ползет вверх. То есть при прокрутке фон, заданный для объекта, прокручивается в 2 раза медленнее, чем мы прокручиваем страницу.

      Мы получаем эффект некой лупы. Давайте сейчас создадим точно такую же анимацию, но с нуля для того, чтобы познакомиться с тем, как настраивать эффекты прокрутки для фона изображения. Заходим в новый проект, в режим "Дизайн". Здесь сразу настроена в настройках страницы минимальная высота в 5000 пикселей. Это нужно для того, чтобы мы могли просмотреть эффекты прокрутки и страницу могли прокрутить как можно дальше вниз. Первое, что мы сделаем, это создадим обычный прямоугольник. Зажимаем клавишу Shift и создаем прямоугольник в виде квадрата. Далее идем в "Заливка" - "Добавить изображение" и выбираем текстуру для будущей лупы.

      Нажимаем "Открыть", устанавливаем положение "По центру", оставляем исходный размер, делаем скругление данному прямоугольнику, выставляя значение 500, чтобы получился круг. Также сделаем обводку белым цветом шириной в 4 пикселя. Снимаем выделение с данного объекта, берем инструмент "Выделение", кликаем на пустом поле для того, чтобы сделать заливку в браузере. Заливку просто выставляем черным цветом. В итоге мы получаем рисунок лупы. Переместим изображение немного вправо и вниз, чтобы у нас была возможность для анимации. Далее идем в "Заливка" и выставляем для данного объекта при его выделении эффект "Прокрутка". Ставим флажок "Перемещение".  

      При прокрутке страницы "Начальное перемещение", то есть значение до того момента, когда верхняя граница браузера коснется Т-образного маркера, наш объект будет двигаться в 2 раза медленнее, чем прокрутка страницы и двигался вверх. Ставим значение 0.5 и после того, как граница коснется маркера, мы хотим, чтобы он также двигался дальше. Выбираем значение "Вверх" и выставляем 0.5. Значение скорости по горизонтали выставляем 0 пикселей, так как мы хотим, чтобы объект двигался только вверх, но со значением скорости меньшим в 2 раза по отношению к тому, как будем прокручивать страницу. Исходную позицию переместим в самый верх, к верхней границе окна браузера.

      Таким образом мы исключили значение "Начальное перемещение", так как наша страница сразу будет открываться, а верхняя граница будет совпадать с Т-образным маркером. Итак, мы установили для перемещения фона эффект "Прокрутки", установили исходную позицию (Т-маркер) в значение 0 пикселей, а "Конечное" и "Начальное перемещение" установили со значением вверх и в 2 раза меньше, чем скорость прокрутки страницы. Таким образом мы получаем объект, двигающийся со скоростью прокрутки страницы в браузере, а фон перемещается в 2 раза медленнее внутри объекта. Давайте посмотрим, что у нас получилось, перейдя в режим "Просмотр". Мы видим, что все получилось так, как мы хотели.

      Получили эффект некоего параллакса и просмотра в лупу, будто между данным окошком и задним фоном есть некоторое расстояние, и мы видим объем при перемещении. Давайте снова перейдем в режим "Дизайн", выделим данный объект и попробуем изменить параметры настройки прокрутки у заднего фона нашего прямоугольника. Изменим значение "Начальное перемещение" - вниз и "Конечное перемещение" тоже вниз. Таким образом мы сделали так, что при прокрутке страницы наш объект сам будет двигаться вверх, как он и двигался ранее, а заполняющий его фон будет двигаться вниз со скоростью в 2 раза меньше, чем скорость прокрутки страницы в браузере. На этом урок закончен. В нем мы рассмотрели основные параметры и их настройки эффекта прокрутки для фона в программе Adobe Muse. Вам необходимо будет выполнить задание, ответить на вопросы и переходить к следующему уроку.

    Узнаете что такое эффекты прокрутки фона. Своими руками сделаете один из примеров таких эффектов. Узнаете как настраивать высоко-сложные системы эффектов. Познакомитесь с реальным примером.


      Жалоба


    Отзывы пользователей


    Слава Баранов

    Уже что то )

    Поделиться отзывом


    Ссылка на отзыв
    Genka

    Круто))

    Поделиться отзывом


    Ссылка на отзыв
    Юлия+Коваль

    Классная тема! Спасибо!

    Поделиться отзывом


    Ссылка на отзыв
    Гость Падалко Сергей

    Супер

    Поделиться отзывом


    Ссылка на отзыв
    Дмитрий Жуков

    Ну очень интересно!

    Поделиться отзывом


    Ссылка на отзыв
    Алексей

    Грамотно.

    Поделиться отзывом


    Ссылка на отзыв
    Андрей А

    Интересно!

    Поделиться отзывом


    Ссылка на отзыв
    Валерий1234

    Спасибо

    Поделиться отзывом


    Ссылка на отзыв
    Aspirantmiha

    Крутая штука. Не знал о прокрутках внутри объектов. Искал видео, как это сделать. Так и не смог разобраться. Здесь все наглядно. Оказывается все намного проще, чем казалось

    Поделиться отзывом


    Ссылка на отзыв
    YanaZamkova

    здорово!

    Поделиться отзывом


    Ссылка на отзыв
    Sharovich

    Спасибо. Всё понятно.

    Поделиться отзывом


    Ссылка на отзыв
    gladir1

    С первого раза не все понятно. Посмотрела дважды. Повторила. Поняла

    Поделиться отзывом


    Ссылка на отзыв
    7dgoni6

    Всё понятно.

    Поделиться отзывом


    Ссылка на отзыв

×