Из этой статьи вы узнаете, как в Adobe Muse применять эффекты прокрутки с перемещением и непрозрачностью к элементам страницы.

Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Применение эффектов прокрутки к элементам страницы

На панели «Эффекты прокрутки» расположены четыре вкладки, предназначенные для управления перемещением, непрозрачностью, виджетом «Слайд-шоу» и содержимым Adobe Edge Animate на основе того, каким образом выполняется прокрутка страницы. Применение различных сочетаний эффектов прокрутки к закрепленным элементам, к объектам, для которых задана ширина 100%, а также к объектам, наложенным друг на друга с помощью панели «Слои» можно добиться широкого разнообразия привлекательных эффектов.

Применение эффектов прокрутки перемещения с помощью панели «Эффекты прокрутки»

Интерфейс панели «Эффекты прокрутки» похож на интерфейс той же панели, но для эффектов «Заливка в браузере» и «Фоновая заливка». Выполните следующие действия, чтобы применить эффекты прокрутки к элементу страницы с помощью вкладки «Перемещение» на панели «Эффекты прокрутки»:

  1. В приложении перейдите в представление «Дизайн» и выберите Страница > Свойства страницы
  2. В поле «Минимальная высота» установите значение не менее 2000 пикселей, чтобы длина страницы была достаточной для прокручивания. 
  3. Нажмите кнопку «ОК», чтобы сохранить изменения и закрыть диалоговое окно «Свойства страницы».
  4. В представлении «Дизайн» нарисуйте на странице прямоугольник или текстовый фрейм.
  5. С помощью вкладки «Заливка» в одноименном меню добавьте мозаичное фоновое изображение или изображение без разбиения. Можно также выбрать лишь заливку сплошным или градиентным цветом.
  6. Выберите «Окно» > «Эффекты прокрутки», чтобы открыть панель настройки эффектов прокрутки.
Откройте панель «Эффекты прокрутки» для настройки параметров таких эффектов.
Откройте панель «Эффекты прокрутки» для настройки параметров таких эффектов.

  1. Включение эффектов прокрутки: на панели «Эффекты прокрутки» отображается вкладка «Перемещение» (крайняя слева). Выделив элемент на странице, установите флажок «Перемещение».

    СОВЕТ. Обратите внимание, что после установки этого флажка на уровне верхнего края элемента появится T-образный маркер. T-образный маркер указывает на исходную позицию эффекта прокрутки, примененного к элементу. Эффект прокрутки начинает работать, когда во время прокрутки страницы посетитель достигает исходной позиции.

    T-образный маркер по умолчанию отображается над элементом. Однако его можно щелкнуть и перетащить вверх или вниз, чтобы разместить его вровень с верхним краем нужного элемента, либо перетащить маркер вниз и разместить под элементом.

  2. Перемещение T-образного маркера для установки исходной позиции: чтобы задать исходную позицию, перетащите T-образный маркер в нужное место. Это позволяет настроить перемещение, которое будет выполняться до и после того, как прокручиваемая страница достигнет верха T-образного маркера.

    Также можно ввести числовое значение в поле «Исходная позиция», расположенное по центру панели «Эффекты прокрутки» при выборе вкладки «Перемещение». В этом примере для исходной позиции установлено значение 200 пикселей. 

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

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

    В разделе «Начальное перемещение» имеются кнопки со стрелками перемещения по горизонтали и вертикали, а также настройки управления скоростью перемещения.

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

  4. Настройка начального перемещения в горизонтальном направлении: задайте настройки перемещения элемента по горизонтали (влево или вправо), нажав кнопки со стрелками влево или вправо, чтобы задать направление, в котором элемент будет перемещаться до достижения своей исходной позиции. В поле справа от стрелок перемещения по горизонтали укажите значение скорости перемещения по горизонтали. Если требуется, чтобы элемент не двигался в этой плоскости, задайте для скорости перемещения по горизонтали значение «0».

  5. Повторите шаги 7 и 8, чтобы задать направление и скорость перемещения в разделе «Конечное перемещение».

В примере ниже для исходной позиции задано значение 500 пикселей. При прокрутке страницы в браузере элемент будет перемещаться вниз до своей исходной позиции со скоростью, равной скорости прокрутки страницы. При достижении исходной позиции элемент размещается в исходном положении. Когда при прокрутке страницы исходная позиция будет пройдена, элемент будет двигаться вправо в два раза быстрее скорости прокрутки страницы.

Применение настроек перемещения для эффекта прокрутки в Adobe Muse
Применение настроек перемещения для эффекта прокрутки

  1. Нажмите «Просмотр» или выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы просмотреть страницу с примененными эффектами прокрутки. Прокрутите страницу вниз и снова вверх, чтобы просмотреть перемещение элемента.
  2. Завершив просмотр, вернитесь в приложение Muse или нажмите кнопку «Дизайн», чтобы продолжить редактирование страницы.

Применение эффектов прокрутки непрозрачности с помощью панели «Эффекты прокрутки»

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

  1. При редактировании страницы в представлении «Дизайн» убедитесь в том, что в диалоговом окне «Свойства страницы» в поле «Мин. высота» указано значение, превышающее среднюю высоту большинства мониторов (например, 2000 пикселей). Также можно добавить содержимое на страницу, чтобы убедиться, что она будет достаточно длинной для прокрутки.
  2. В представлении «Дизайн» нарисуйте на странице прямоугольник или текстовый фрейм.
  3. Воспользуйтесь вкладкой «Заливка» или одноименным меню (либо воспользуйтесь панелью «Заливка»), чтобы добавить для выбранного элемента мозаичное фоновое изображение или изображение без разбиения, либо выберите сплошной или градиентный цвет заливки. (Вы также можете добавить виджет «Слайд-шоу» или поместить на страницу OAM-файл Adobe Edge Animate.)
  4. Выбрав элемент, перейдите на вкладку «Непрозрачность» (вторая вкладка слева) на панели «Эффекты прокрутки», а затем установите флажок «Непрозрачность».
Установите флажок «Непрозрачность», чтобы получить возможность применить к выбранному элементу эффекты прокрутки непрозрачности.
Установите флажок «Непрозрачность», чтобы получить возможность применить к выбранному элементу эффекты прокрутки непрозрачности.

После включения этого параметра на элементе появится маркер другого типа. Аналогично тому, как T-образный маркер используется для задания исходной позиции на вкладке «Перемещение», этот маркер можно так же щелкнуть и перетащить для размещения над элементом, расположить его вровень с верхним краем элемента (или вверху любой части элемента), а также разместить его под элементом. Маркер непрозрачности состоит из трех различных частей, которые можно перетаскивать независимо друг от друга для задания исходной позиции, а также позиций исчезания 1 и 2.

  1. Нажмите и перетащите центральную часть маркера (квадрат), чтобы задать исходную позицию. В примере ниже для исходной позиции задано значение 150 пикселей.
Задайте исходную позицию, перетащив центральную часть маркера в виде квадрата в вертикальном направлении.
Задайте исходную позицию, перетащив центральную часть маркера в виде квадрата в вертикальном направлении.

  1. Нажмите и перетащите верхнюю часть маркера (круг) в нужное место на странице. В примере ниже для параметра «Позиция исчезания 1» задано значение 100 пикселей.
Значение параметра «Позиция исчезания 1» маркера непрозрачности
Нажмите и перетащите верхнюю левую часть маркера в виде круга, чтобы задать первую позицию исчезания, которая будет влиять на прозрачность элемента.

  1. Нажмите и перетащите нижнюю часть маркера (круг) в нужное место на странице. В примере ниже для параметра «Позиция исчезания 2» задано значение 200 пикселей.
Значение параметра «Позиция исчезания 2» маркера непрозрачности
Нажмите и перетащите верхнюю правую часть маркера в виде круга, чтобы задать вторую позицию исчезания, которая будет влиять на прозрачность элемента.

Примечание.

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

В этом примере элемент сначала полностью прозрачный, а затем начинает постепенно появляться, пока не станет полностью прозрачным (для параметра «Непрозрачность», соответствующего исходной позиции, в настоящее время задано значение «100%») при достижении исходной позиции при прокрутке страницы. После того как страницы будет прокручена ниже исходной позиции, элемент снова постепенно становится прозрачным и исчезает из вида, когда будет пройдена отметка в 200 пикселей.

Процент непрозрачности для эффектов прокрутки
Задайте процент непрозрачности (где 0% — полная прозрачность) на вкладке «Непрозрачность» панели «Эффекты прокрутки».

  1. Нажмите «Просмотр» или выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы просмотреть страницу с примененными эффектами прокрутки. Прокрутите страницу вниз и снова вверх, чтобы просмотреть изменение непрозрачности элемента по мере прокрутки страницы.
  2. Завершив просмотр, вернитесь в приложение Muse или нажмите кнопку «Дизайн», чтобы продолжить редактирование страницы.

Работа со вкладкой «Слайд-шоу» панели «Эффекты прокрутки

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

Нажмите вкладку «Слайд-шоу» (третью вкладку слева), чтобы перейти к настройкам в этом разделе.

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

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

Чтобы применить эффекты прокрутки к виджету «Слайд-шоу», выполните приведенные ниже действия.

  1. В диалоговом окне «Свойства страницы» обновите значение в поле «Мин. высота», чтобы сделать страницу достаточно длинной для прокрутки. Кроме того, чтобы сделать страницу длиннее, на нее можно добавить необходимый объем материала.
  2. Перетащите виджет «Слайд-шоу» из библиотеки виджетов на страницу. В меню «Параметры» настройте параметры слайд-шоу. (При применении эффектов прокрутки к виджету «Слайд-шоу» кнопки «Далее», «Назад» и миниатюры обычно отключены).
  3. Добавьте изображения в виджет, щелкнув значок папки рядом с разделом «Изображения» в меню «Параметры». Перейдите к папке с нужными изображениями и добавьте их в галерею.
  4. С помощью элемента «Фикс.» на панели управления закрепите виджет в текущей позиции в окне браузера. Выбрав слайд-шоу, нажмите значок одной из шести позиций для закрепления.
Применение эффектов прокрутки к виджетам «Слайд-шоу»
Закрепите виджет «Слайд-шоу» в нужном месте, чтобы он оставался неподвижным в окне браузера при прокрутке страницы.

Добавив и настроив закрепленное слайд-шоу, можно приступать к добавлению эффектов прокрутки.

Выбрав виджет «Слайд-шоу», на панели «Эффекты прокрутки» на вкладке «Слайд-шоу» установите флажок «Слайд-шоу».

Установка флажка Слайд-шоу» на панели «Эффекты прокрутки».
Выберите виджет «Слайд-шоу» и установите флажок «Слайд-шоу» на панели «Эффекты прокрутки».

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

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

Первый способ заключается в задании нужной исходной позиции и последующей установке флажка «Автозапуск».

Когда страница будет прокручена ниже исходной позиции (или когда посетитель щелкнет ссылку на тег привязки и перейдет к разделу на странице, расположенному ниже исходной позиции), начнется воспроизведение слайд-шоу. Если включен параметр автоматического воспроизведения, изображения будут циклически повторяться, пока посетитель не прокрутит страницу выше исходной позиции или не покинет страницу.

В примере на рисунке выше воспроизведение слайд-шоу начинается с момента, когда страница прокручена до отметки 100 пикселей (или ниже исходной позиции). При прокрутке страницы вверх выше исходной позиции (до отметки 99 пикселей или меньше) воспроизведение слайд-шоу останавливается.

Второй способ управления виджетом «Слайд-шоу» подразумевает задание исходной позиции и установку переключателя «Переключать слайды каждые». В этом случае также задается число пикселей в поле, расположенным под этим переключателем, чтобы указать периодичность смены изображений в слайд-шоу по мере прокрутки страницы.

Например, виджет «Слайд-шоу» можно закрепить на длинной странице, чтобы он оставался неподвижным в одном месте при прокрутке другого содержимого страницы. Задав числовое значение для параметра «Переключать слайды каждые», слайд-шоу можно настроить таким образом, что следующее изображение будет показываться каждый раз, когда страница будет прокручена вниз на определенное количество символов.

В этом примере для исходной позиции установлено значение 200 пикселей. Как только страница будет прокручена ниже отметки в 200 пикселей сверху, начнется воспроизведение слайд-шоу и при прокрутке страницы на каждые 30 пикселей будет показываться следующее изображение.

Настройка эффектов прокрутки для виджетов «Слайд-шоу» в Adobe Muse
Настройка слайд-шоу на показ следующего изображения при прокрутке страницы вниз на определенное расстояние (в пикселях).

Работа со вкладкой «Adobe Edge Animate» панели «Эффекты прокрутки»

Adobe Edge Animate представляет собой интуитивно понятный дизайнерский инструмент, позволяющий создавать веб-анимацию на основе HTML5. С помощью интерфейса Edge Animate можно создавать композиции, использующие зацикливание движения графики и символов. Анимации, созданные с помощью Adobe Edge Animate, можно экспортировать в виде файлов OAM для их последующего размещения на страницах своего сайта Muse. Для воспроизведения таких анимаций в браузере не требуются никакие подключаемые модули.

При создании анимаций в Adobe Edge Animate необходимо перетащить элемент в рабочую область программы и воспользоваться шкалой времени для управления его движениями. Кроме добавления элементов прямо на шкалу времени, можно также создать вложенные элементы с подчиненными элементами, которые будут воспроизводиться с использованием их собственных внутренних шкал времени. Дополнительные сведения о работе с компонентом Adobe Edge Animate см. на странице продукта Adobe Edge Animate. Также ознакомьтесь с видеоруководством по Adobe Edge Animate на сайте Adobe TV.

Чтобы приступить к работе с компонентом перемещения Adobe Edge Animate при прокрутке, сначала необходимо разработать дизайн композиции, предназначенной специально для этой цели. Эффекты прокрутки можно применить к файлам OAM, чтобы изменить поведение анимаций, помещенных на основную шкалу времени. Крайне важно создать дизайн анимации таким образом, чтобы на основной шкале времени находились лишь те элементы, которые должны перемещаться при прокрутке страницы (все остальные элементы анимации должны находиться на вложенных символьных шкалах времени). Такой подход позволяет создавать интерактивные анимации. По мере прокрутки страницы посетителями настройки эффекта прокрутки применяются исключительно к воспроизведению анимированных элементов на основной шкале времени.

Дополнительные сведения о создании анимаций для добавления на веб-сайт Adobe Muse см. в разделе Добавление материалов Adobe Edge Animate.

Выполните указанные ниже действия, чтобы приступить к работе со вкладкой «Adobe Edge Animate» панели «Эффекты прокрутки».

  1. Экспортируйте файл OAM из Adobe Edge Animate и сохраните его в папке с файлами сайта.
  2. Откройте приложение Muse и дважды нажмите страницу, чтобы открыть ее в представлении «Дизайн». Убедитесь в том, что страница достаточно длинная для прокрутки, обновив значение в поле «Мин. высота» в диалоговом окне «Свойства страницы» или добавив на страницу необходимый объем материала.
  3. Выберите «Файл» > «Поместить» и перейдите к нужному файлу OAM в папке сайта.
  4. Откройте панель «Эффекты прокрутки». Нажмите вкладку «Adobe Edge Animate» (четвертую вкладку слева), чтобы перейти к настройкам в этом разделе.
  5. Выбрав файл OAM, установите флажок «Edge Animate».
Настройка эффектов прокрутки для анимаций в Adobe Muse
Настройте воспроизведение анимации Edge Animate таким образом, чтобы оно начиналось тогда, когда страница прокручена до определенной отметки, или чтобы кадры менялись каждый раз, когда страница прокручена на определенное расстояние (в пикселях).

В этом примере для исходной позиции установлено значение 50 пикселей. Чтобы изменить эту позицию, можно перетащить T-образный маркер или указать нужное значение в поле «Исходное положение».

Указав исходное положение, можно управлять воспроизведением анимации двумя способами.

  • Автозапуск: при выборе этого параметра воспроизведение анимации на основной шкале времени начинается с момента достижения в браузере исходной позиции при прокрутке страницы, независимо от количества кадров на основной шкале времени. Воспроизведение анимации продолжается до тех пор, пока страница не будет прокручена до отметки выше исходной позиции.
  • Переключать кадры каждые: при выборе этого параметра воспроизведение анимации будет выполняться покадрово — по одному кадру за раз при прокрутке страница на определенное число пикселей. Например, если имеется страница высотой 3000 пикселей и для параметра задано значение «10», воспроизведение анимации на основной шкале времени будет осуществляться по одному кадру при прокрутке страницы на каждые 10 пикселей. Если посетитель прокручивает страницу быстрее, то и анимация будет воспроизводиться с более высокой частотой кадров.

Примечание.

Любые анимированные объекты, которые являются вложенными или не связаны с основой шкалой времени в композиции Adobe Edge Animate, остаются без изменений при прокрутке страницы. Поэтому можно выбрать либо статический фон, либо циклическое воспроизведение вложенных элементов, которые постоянно двигаются независимо от взаимодействия посетителя с элементами управления прокруткой страницы.

  1. Настроив параметры на вкладке «Edge Animate» панели «Эффекты прокрутки», выберите «Файл» > «Предварительный просмотр страницы в браузере» (или нажмите кнопку «Просмотр»). Проверьте поведение страницы, прокрутив ее вверх и вниз, чтобы просмотреть воспроизведение анимированного содержимого Edge Animate (добавленного на основную шкалу времени).
  2. Если требуется внести изменения, вернитесь в приложение Muse (или нажмите кнопку «Дизайн») и обновите нужные настройки на панели «Эффекты прокрутки».

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет