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

Примечание.

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

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

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

Чтобы приступить к работе, выполните указанные ниже действия.

  1. Посетите веб-сайт с примерами и нажмите каждый раздел, чтобы ознакомиться с различными эффектами. Прокрутите вниз каждую страницу с примером, чтобы увидеть, как эффекты прокрутки управляют отображением элементов на странице.
  2. Прокрутите сайт с примерами в самый низ, чтобы загрузить файл MUSE.
  3. Откройте пример веб-сайта и ознакомьтесь с его проектом в рабочей среде Muse.
  4. Откройте панель «Слои» и разверните раздел «Содержимое», чтобы просмотреть элементы, которые использовались для создания каждого примера.

Эффект появления по частям

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

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

Чтобы создать подобный эффект появления по частям, выполните указанные ниже действия.

  1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». В поле «Мин. Высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 14,120 пикселей.
  2. С помощью инструмента «Текст» создайте текстовый фрейм и введите свой текст.
  3. На панели «Эффекты прокрутки» перейдите на вкладку «Перемещение» и установите флажок «Перемещение». В этом примере значения настроек в разделе «Начальное перемещение» заданы таким образом, что текстовый фрейм перемещается вниз со скоростью 0,25 (1/4) скорости прокрутки страницы. По достижении исходной позиции текстового фрейма он размещается в положении, которое задано для него в представлении «Дизайн». Затем, в соответствии с настройками в разделе «Конечное перемещение» (для перемещения в обоих направлениях задано значение «0»), первый элемент остается на месте, как если бы его закрепили.
  4. Файл PNG с прозрачностью (очертания корпуса телефона) размещается под текстовым фреймом. Этот элемент использует настройки на вкладке «Перемещение» панели «Эффекты прокрутки», которые заданы таким образом, что элемент влетает на страницу слева и остается в заданном положении.
  5. Почти одновременно с очертаниями корпуса телефона на страницу слева влетает небольшой элемент белого цвета (по аналогичной траектории) и также фиксируется в заданном для него положении. Этот элемент белого цвета обозначает динамик, расположенный в верхней части телефона. Данный ресурс (phone-earpiece.png) размещается над слоем очертаний корпуса телефона на панели «Слои», поэтому на странице он отображается поверх телефона. 
  6. В нижней части корпуса телефона напротив динамика размещается небольшой белый элемент, обозначающий кнопку «Домой». Он так же, как и элемент динамика, влетает слева (по аналогичной траектории) и так же размещается поверх очертаний корпуса телефона.
  7. Затем слева влетает прямоугольник с едва заметной градиентной заливкой (от белого до светло-серого). Он использует настройки на вкладке «Перемещение» панели «Эффекты прокрутки» для перемещения в указанное положение и точно соответствует размерам прозрачной области в центре очертаний корпуса телефона. Оставаясь в этом положении, данный элемент имитирует экран телефона. Слой элемента экрана телефона (phone-screen.png) находится в самом низу на панели «Слои», поэтому он всегда отображается на странице на заднем фоне (за всеми другими элементами телефона).
  8. Затем на заданные места перемещаются четыре прямоугольника разных размеров и со сплошной заливкой разными цветами (голубым, зеленым, желтым и красным). Для создания эффекта влета фрагментов с разных направлений для каждого из прямоугольников на вкладке «Перемещение» панели «Эффекты прокрутки» заданы различные параметры направлений и скорости перемещения. Синий прямоугольник перемещается вниз и влево, зеленый и желтый прямоугольники перемещаются вверх и вправо, а красный прямоугольник — вверх и влево в соответствии с настройками в разделе «Начальное перемещение». В разделе «Конечное перемещение» для всех прямоугольников заданы значения «0» для обоих направлений перемещения. Это позволяет добиться того, что после размещения каждого прямоугольника в нужном положении они остаются закрепленными поверх экрана телефона.
  9. После появления всех остальных фрагментов появляется второй текстовый фрейм, который перемещается снизу вверх и размещается под первым текстовым фреймом. Он перемещается со скоростью 0,5 (половина) скорости прокрутки страницы.

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

Прямоугольник со сплошной заливкой цветом служит для скрытия расположенной за ним группы.

Эффект появления по частям в Adobe Muse.
Эффект появления по частям в Adobe Muse.

Примечание.

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

  1. Прямоугольник закреплен на месте и не перемещается, поскольку для всех настроек в разделах «Начальное перемещение» и «Конечное перемещение» заданы значения «0». При прокрутке страницы до исходной позиции группы объектов с изображением лампочки она перемещается влево и постепенно появляется, выходя из-за прямоугольника, размещенного перед ней. Слой группы объектов с изображением лампочки находится над слоем элемента экрана мобильного телефона, но под элементом очертаний корпуса телефона, поэтому создается эффект появления изображения лампочки (аналогично переходу, который происходит при перелистывании экрана телефона пальцем в горизонтальном направлении). Группа объектов с изображением лампочки закрывает собой прямоугольник с градиентной заливкой, представляющий экран телефона.

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

Скользящие меню

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

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

Откройте пример сайта в браузере и просмотрите, как самолет влетает горизонтально на страницу справа налево, а затем появляются стилизованные пункты меню и фон с градиентной заливкой и диагональными полосами.

Чтобы создать подобный эффект скользящего меню, выполните указанные ниже действия.

  1. В представлении «Дизайн» выберите Страница > Свойства страницы. В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 4,665 пикселя.
  2. Слой с изображением самолета находится поверх всего остального содержимого страницы, поэтому этот слой расположен вверху списка слоев на панели «Слои». В соответствии с параметрами, заданными на вкладке «Перемещение» панели «Эффекты прокрутки», он перемещается влево как до достижения исходной позиции, так и после него.
Скользящее меню в эффектах прокрутки Adobe Muse.
Скользящее меню в эффектах прокрутки Adobe Muse.

  1. Четыре текстовых фрейма настроены на вылет слева для формирования вертикально расположенных пунктов меню навигации. На вкладке «Перемещение» панели «Эффекты прокрутки» для каждого из текстовых фреймов указаны одинаковые значения скорости перемещения (1,25 скорости прокрутки страницы) в разделе «Начальное перемещение». Каждому текстовому фрейму также назначается свое исходное положение. По мере прокрутки страницы вниз каждый текстовый фрейм скользит до своей позиции, выравниваясь с другими элементами в левой части страницы. Для всех текстовых фреймов в разделе «Конечное перемещение» указаны значения «0,0», поэтому после достижения нужной позиции пункты меню остаются на месте.
  2. В качестве фона текстовых фреймов используется заливка сплошным цветом, хотя на первый взгляд может показаться, что это изображения, поскольку они имеют скошенные, а не прямые края. Такой эффект достигается за счет расположения слоев этих трех прямоугольников над слоями текстовых фреймов со сплошной заливкой, цвет которой совпадает с цветом заливки браузера.
Группирование прямоугольников и их расположение поверх пунктов меню для создания эффекта скошенных левого и правого краев.
Группирование прямоугольников и их расположение поверх пунктов меню для создания эффекта скошенных левого и правого краев.

  1. Анимация текстового фрейма изначально скрыта за другой группой прямоугольников, поскольку текстовые фреймы расположены ниже этой группы на панели «Слои». Группа состоит из трех прямоугольников: большого — с вертикальной градиентной заливкой и двух меньших (квадрат и повернутый прямоугольник) — со сплошной заливкой, цвет которой совпадает с цветом верхнего края градиентной заливки.
  1. Если прокрутить страницу вниз для просмотра нижней части группы, над правым нижним углом прямоугольника с градиентной заливкой отображаются еще четыре повернутых прямоугольника различной ширины.
Поворот прямоугольников с заливкой того же цвета, что и страница, для создания эффекта отрезания угла прямоугольника с градиентной заливкой.
Поворот прямоугольников с заливкой того же цвета, что и страница, для создания эффекта отрезания угла прямоугольника с градиентной заливкой.

Группы идеально подходят для объединения ряда элементов и управления ими как единым элементом. В этом примере к группе прямоугольников различной ширины применены эффекты перемещения при прокрутке, благодаря чему они перемещаются как единый объект.

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

Исчезание

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

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

  1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». Укажите в поле «Мин. высота» намного большее значение, чем средняя высота монитора, чтобы страница была достаточно длинной для прокрутки. В этом примере минимальная высота страницы составляет 2 988 пикселей.
  2. Изображение солнца размещается по центру страницы. На вкладке «Перемещение» панели «Эффекты прокрутки» для исходной позиции задано значение в 1410 пикселей. Обратите также внимание на параметры в разделах «Начальное перемещение» и «Конечное перемещение».
Указание значений параметров «Начальное перемещение» и «Конечное перемещение» эффекта исчезания.
Указание значений параметров «Начальное перемещение» и «Конечное перемещение» эффекта исчезания.

В соответствии с этими настройками создается эффект перемещения солнца по дуге от левого нижнего края страницы, затем вверх к ее центру (до своей исходной позиции), потом снова вниз к нижнему правому краю страницы.

  1. Выбрав изображение солнца, нажмите вкладку «Непрозрачность», чтобы просмотреть соответствующие настройки. В поле «Позиция исчезания 1» указано значение 726 пикселей (выше изображения солнца). В поле «Позиция исчезания 2» указано значение 1925 пикселей (ниже изображения солнца). Непрозрачность солнца начинается со значения 0% (полностью прозрачное), затем оно становится полностью непрозрачным по мере прокрутки страницы до исходной позиции солнца. При прокрутке страницы вниз за исходную позицию солнца значение непрозрачности меняется от 100% до 0%, что создает эффект появления и исчезания солнца.
Настройка параметров прозрачности на вкладке «Непрозрачность» панели «Эффекты прокрутки».
Настройка параметров прозрачности на вкладке «Непрозрачность» панели «Эффекты прокрутки».

  1. Проверьте страницу, выбрав меню «Файл» > «Предварительный просмотр страницы в браузере». Прокрутите страницу и просмотрите, как восходит солнце, постепенно появляясь, а затем заходит, двигаясь вправо и постепенно исчезая.
  2. Закройте браузер и вернитесь в рабочую среду Muse.

Edge Animate

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

Такой анимационный эффект достигается за счет комбинирования настроек на вкладках «Перемещение» и «Edge Animate».

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

Чтобы создать подобный эффект с тремя OAM-файлами, помещенными на страницу, выполните указанные ниже действия.

  1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 7465 пикселей.
  2. Выберите все три экземпляра компаса на странице. Можно заметить, что на вкладке «Перемещение» панели «Эффекты прокрутки» для всех файлов OAM указаны одинаковые значения настроек исходной позиции и перемещения.
Создание эффекта анимации для файлов OAM с использованием эффектов прокрутки.
Создание эффекта анимации для файлов OAM с использованием эффектов прокрутки.

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

  1. Нажмите в любом месте страницы, чтобы отменить выбор всех трех компасов, а затем выберите крайний компас слева. Удерживая нажатой клавишу Shift, нажмите крайний компас справа, чтобы выбрать оба компаса. Перейдите на вкладку «Edge Animate» панели «Эффекты прокрутки», чтобы просмотреть настройки на этой вкладке.
Отмена выбора всех трех компасов, а затем выбор компасов слева и справа.
Отмена выбора всех трех компасов, а затем выбор компасов слева и справа.

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

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

Изменяя скорости воспроизведения анимации нескольких помещенных на страницу элементов Edge Animate, относительно скорости прокрутки страницы, можно создавать интересные эффекты анимации. Например, можно создать косяк рыб, облака, перемещающиеся по небу, а также другие эффекты, добавляя несколько экземпляров одного и того же файла OAM и применяя к ним разные настройки эффектов прокрутки.

Эффект слайд-шоу

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

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

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

  1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 7 465 пикселей.
  2. К текстовому фрейму с текстом «Superpack» настроен на использование эффекта перемещения при прокрутке. На вкладке «Перемещение» в разделе «Начальное перемещение» задайте настройки таким образом, чтобы текст перемещался слева направо с той же скоростью, с которой посетитель прокручивает страницу. В разделе «Конечное перемещение» для перемещения в обоих направлениях задано значение 0, что обеспечивает неизменное положение текстового фрейма и равнозначно его закреплению на странице.
Установите флажок «Перемещение» и настройте эффекты перемещения при прокрутке таким образом, чтобы текстовый фрейм перемещался вправо.
Установите флажок «Перемещение» и настройте эффекты перемещения при прокрутке таким образом, чтобы текстовый фрейм перемещался вправо.

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

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

  1. Выбрав слайд-шоу, перейдите на вкладку «Слайд-шоу» панели «Эффекты прокрутки» и установите флажок «Слайд-шоу».
  2. Кроме того, можно перетащить T-образный маркер или ввести нужное значение в соответствующее поле для задания исходной позиции. В этом примере для исходной позиции задано значение 1066 пикселей.
  3. Установите переключатель в положение «Переключать слайды каждые» и введите в расположенном ниже поле значение 50 пикселей.
Настройка слайд-шоу на показ следующего изображения при прокрутке страницы вниз на 50 пикселей.
Настройка слайд-шоу на показ следующего изображения при прокрутке страницы вниз на 50 пикселей.

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

Свертывание

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

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

Чтобы создать подобный эффект свертывания, выполните указанные ниже действия.

  1. В представлении «Дизайн» выберите Страница > Свойства страницы. В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 16 990 пикселей.
  2. В меню «Заливка в браузере» задайте сплошной синий цвет заливки в браузере.
Выберите цвет заливки в меню «Заливка в браузере».
Выберите цвет заливки в меню «Заливка в браузере».

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

  1. Выбрав зеленый прямоугольник, перейдите на панель «Эффекты прокрутки» и на вкладке «Перемещение» установите флажок «Перемещение». Нажмите T-образный маркер, перетащите его и сверните в исходной позиции, которая задана на верхнем крае прямоугольника и в данном примере сайта соответствует значению 2248 пикселей.
  1. В разделе «Начальное перемещение» задайте настройки таким образом, чтобы прямоугольник перемещался вниз со скоростью 1,5 скорости прокрутки страницы. Для перемещения в других направлениях задайте значение «0».
  2. Воспользуйтесь инструментом «Текст», чтобы создать текстовый фрейм вверху прямоугольника зеленого цвета. В этом примере в фрейме содержится текст «This is the roll-up». Можно ввести другой текст и применить к нему желаемые параметры форматирования.
  3. Выбрав текстовый фрейм, на панели «Эффекты прокрутки» перейдите на вкладку «Перемещение». Перетащите T-образный маркер, выровняв его по верхнему краю зеленого прямоугольника, затем обновите значения параметров, определяющих отображение текстового фрейма при прокрутке страницы.
Разместите T-образный маркер вровень с верхним краем зеленого прямоугольника.
Разместите T-образный маркер вровень с верхним краем зеленого прямоугольника.

  1. В разделе «Начальное перемещение» задайте для перемещения вниз скорость, равную 1,5 скорости прокрутки страницы. Для всех остальных настроек на панели задайте значение «0». В соответствии с этими настройками текст будет перемещаться вниз в том же направлении и с той же скоростью, с которой перемещается зеленый прямоугольник. Когда страница будет прокручена до исходных позиций прямоугольника и текстового фрейма, оба объекта останутся на месте.
  2. Нажмите кнопку «Просмотр» и прокрутите страницу вниз, чтобы просмотреть, как зеленый прямоугольник и текст будут появляться сверху. Завершив просмотр, нажмите кнопку «Дизайн», чтобы вернуться к редактированию страницы.
  3. В меню «Просмотр» уменьшите масштаб до 10% исходного размера. Выберите зеленый прямоугольник и текстовый фрейм. Удерживая нажатой клавишу Option или Alt, перетащите два элемента вниз на странице, чтобы дублировать их. Задайте для полученной копии прямоугольника темно-синий цвет заливки, затем обновите текстовое содержимое с помощью инструмента «Текст».
Обновите цвет заливки прямоугольника и измените текст в текстовом фрейме для нового раздела страницы.
Обновите цвет заливки прямоугольника и измените текст в текстовом фрейме для нового раздела страницы.

В этом примере в дублированном текстовом фрейме содержится текст «Use it to drastically alter the appearance of your website». Можно ввести любой текст, чтобы обозначить темно-синий раздел страницы.

  1. С помощью инструмента «Выделение» разместите дублированные прямоугольник и текстовый фрейм на расстоянии примерно 5448 пикселей ниже верхней части страницы.
  2. Выбрав темно-синий прямоугольник, на панели «Эффекты прокрутки» перейдите на вкладку «Перемещение». Значение исходной позиции было автоматически обновлено с учетом нового положения прямоугольника (5448 пикселей), а для перемещения вниз в разделе «Начальное перемещение» по-прежнему указана скорость, равная 1,5 скорости прокрутки страницы (для всех остальных настроек задано значение «0»). Обратившись к текстовому фрейму, можно заменить, что для дублированного элемента также применяются эффекты прокрутки.
  3. Повторите шаги 12 и 13 четыре раза, чтобы создать в общей сложности шесть различных прямоугольников большого размера с текстовыми фреймами поверх них. К каждому из прямоугольников уже применены эффекты теней и эффекты прокрутки. Разместите оставшиеся четыре прямоугольника в следующих исходных позициях: 8648 пикселей, 11 852 пикселей, 15 058 пикселей и 18 251 пикселей, чтобы каждый из разделов находился от другого на расстоянии примерно 1200 пикселей.
  4. С помощью меню «Заливка» примените для прямоугольников разные цвета заливки. Поэкспериментируйте с применением сплошной и градиентной заливки, чтобы выделить каждый раздел на странице.
  5. С помощью инструмента «Текст» обновите текст в каждом из разделов. Например, можно обозначить раздел, используя цвет фона, на котором расположен текст: «Это синий раздел».
  6. Проверьте страницу, выбрав меню «Файл» > «Предварительный просмотр страницы в браузере». Прокрутите страницу, чтобы увидеть, как появляются разделы страницы, а затем заменяются следующим разделом.
  7. Закройте браузер и вернитесь в рабочую среду Muse.

Динамический текст

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

Чтобы создать подобный эффект динамического текста, выполните указанные ниже действия.

  1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 4 854 пикселей.
  2. В качестве цвета заливки страницы выберите значение «Нет». Цвет заливки в браузере не имеет значения, поскольку на следующем этапе на странице будет размещен длинный прямоугольник.
  3. С помощью инструмента «Прямоугольник» нарисуйте большой прямоугольник шириной примерно 1159 пикселей и высотой 4854 пикселя. С помощью меню «Заливка» выберите заливку сплошным цветом или градиентом. В этом примере в качестве заливки используется градиент от бирюзового до розового цвета. С помощью инструмента «Выделение» разместите прямоугольник по центру страницы, чтобы он заполнял собой всю область окна браузера. При необходимости можно уменьшить масштаб для проверки расположения прямоугольника по центру страницы.
Уменьшите масштаб и разместите прямоугольник по центру длинной страницы.
Уменьшите масштаб и разместите прямоугольник по центру длинной страницы.

  1. Разместив прямоугольник по центру, выберите в меню «Просмотр» значение увеличения 100%.
  2. С помощью инструмента «Текст» создайте в левой части страницы несколько текстовых фреймов. В этом примере используется пять фреймов. Ниже приведено содержимое каждого фрейма, однако вы можете ввести в каждый из них любой текст:
    • Five Frames
    • Scrolling
    • At Different Speeds Will
    • Create
    • Dynamic Tension

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

  1. С помощью инструмента «Текст» выделите каждый из текстовых фреймов. На панели «Текст» (или с помощью параметров форматирования на панели элементов управления) примените к каждому текстовому фрейму разные веб-шрифты, размер шрифта, цвет и другие параметры оформления.
  2. Выделите все текстовые фреймы. Не снимая выделения, откройте вкладку «Перемещение» на панели «Эффекты прокрутки». Введите одинаковое числовое значение, чтобы одновременно задать исходную позицию для всех выделенных текстовых фреймов. (В этом примере для исходной позиции установлено 1372 пикселей). В разделах «Начальное перемещение» и «Конечное перемещение» установите направление перемещения по горизонтали вправо. Для всех вертикальных направлений начального и конечного перемещения установите значение 0, чтобы текстовые фреймы не перемещались по вертикали.
  3. нажмите за пределами текстовых фреймов, а затем нажмите каждый текстовый фрейм по отдельности. Введите для каждого текстового фрейма немного разные значения. В списке ниже первое значение — это скорость начального перемещения, второе значение — скорость конечного перемещения в горизонтальном направлении (вправо):
    • Five Frames: 0,9x, 0,1x
    • Scrolling: 0,12x, 0,5x
    • At Different Speeds Will: 0,7x, 0,17x
    • Create: 1,1x, 0,005x
    • Dynamic Tension.: 1x, 0,01x

Примечание.

При дублировании текстового фрейма для создания эффекта отбрасываемой тени можно сгруппировать два или более экземпляров текстового фрейма и управлять ими как единой группой для применения эффектов прокрутки.

  1. С помощью инструмента «Текст» создайте текстовое поле и введите число 5 в правой части страницы. Этот текстовый фрейм также можно дублировать и применить к его экземплярам различные цвета и параметры форматирования текста для создания эффекта скошенных краев и тени. При дублировании текстовых фреймов в целях проектирования их можно объединять в группы и применять эффекты прокрутки ко всей группе.
  2. Пока выбран текстовый фрейм с числом 5, установите флажок «Перемещение» на вкладке «Перемещение» панели «Эффекты прокрутки». Настройте исходную позицию, введя числовое значение или перетащив T-манипулятор (в этом примере это значение равно 1425 пикселям). В разделе «Начальное перемещение» настройте перемещение элемента влево со скоростью прокрутки (значение 1). В разделе «Конечное перемещение» настройте перемещение элемента влево со скоростью 0,01x скорости прокрутки.
  3. Проверьте страницу, выбрав меню «Файл» > «Предварительный просмотр страницы в браузере». Прокрутите страницу и проверьте, что пять текстовых фреймов появляются на странице с левой стороны, а текстовый фрейм с числом 5 — справа. Прокрутите страницу вверх и вниз, чтобы проверить анимацию текстовых фреймов.
  4. Закройте браузер и вернитесь в рабочую среду Muse.
     

Каскадное меню

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

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

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

Для создания аналогичного каскадного меню выполните следующие действия.

  1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 7465 пикселей.
  2. Для цвета заливки установите значение «Нет», а для заливки браузера выберите сплошной цвет заливки. В этом примере для заливки браузера установлен светло коричневый цвет.
  3. С помощью инструмента «Текст» создайте новый текстовый фрейм. Введите слово «Home». С помощью параметров форматирования на панели элементов управления добавьте в текстовый фрейм цвет фона. Измените другие параметры форматирования для оформления текста необходимым образом. С помощью манипуляторов по сторонам кнопки увеличьте ее размер приблизительно до 300 пикселей в ширину и 115 пикселей в высоту.
Оформление текстового фрейма с помощью параметров на панели элементов управления.
Оформление текстового фрейма с помощью параметров на панели элементов управления.

  1. Откройте панель «Состояния». Выберите состояние «Курсор над кнопкой» и добавьте другой цвет заливки (или примените требуемый стиль) для создания кнопки, реагирующей на наведение курсора.
Выбор состояния «Курсор над кнопкой» и оформление кнопки для создания другого внешнего вида по сравнению со стандартным состоянием.
Выбор состояния «Курсор над кнопкой» и оформление кнопки для создания другого внешнего вида по сравнению со стандартным состоянием.

  1. Обновив состояние «Курсор над кнопкой», снова выберите состояние «Стандартное».
  2. Откройте вкладку «Перемещение» на панели «Эффекты прокрутки». Не снимая выделения с кнопки, установите флажок «Перемещение». Настройте исходную позицию, перетащив T-манипулятор или введя числовое значение. В разделе «Начальное перемещение» настройте перемещение вверх со скоростью 0,75 от скорости прокрутки. Во всех остальных полях задайте значение 0.
Включение эффектов прокрутки на вкладке «Перемещение» и настройка направления и скорости перемещения.
Включение эффектов прокрутки на вкладке «Перемещение» и настройка направления и скорости перемещения.

  1. Удерживая клавишу Option (Alt), перетащите кнопку Home дальше вниз страницы. При этом будет создан дубликат кнопки. Убедитесь, что дубликат выровнен по вертикали с исходной кнопкой Home. Если выбрана новая копия элемента, при выравнивании двух элементов в центре временно отображается темно-синяя направляющая с интеллектуальными функциями.
Перетаскивание дублирующейся копии кнопки с нажатой клавишей Option (Alt) для ее выравнивания по вертикали.
Перетаскивание дублирующейся копии кнопки с нажатой клавишей Option (Alt) для ее выравнивания по вертикали.

  1. Переместите дублирующуюся кнопку вниз, расположив ее на расстоянии 460 пикселей ниже исходной кнопки.
  2. Повторите шаги 7 и 8, чтобы дублировать кнопку еще два раза для создания на странице четырех кнопок, равноудаленных друг от друга. В режиме редактирования с помощью инструмента «Текст» измените текстовые метки второй, третьей и четвертой сверху кнопок на «Products», «Photos» и «Contact Us».
Редактирование текста в текстовых фреймах для создания уникальной подписи для каждой кнопки.
Редактирование текста в текстовых фреймах для создания уникальной подписи для каждой кнопки.

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

  1. Вычислите общую высоту четырех кнопок в их конечном положении, сложив значения высоты кнопок и расстояний между ними. В этом примере высота каждой кнопки равна 116 пикселям, а расстояние между двух кнопок составляет 4 пикселя. Это значит, что общая высота вертикальной строки меню (после сборки) составляет 476 пикселей. С помощью инструмента «Прямоугольник» нарисуйте прямоугольник с необходимой шириной раздела страницы и высотой, равной высоте строки меню. В этом примере ширина прямоугольника составляет 931 пиксел, а высота — 476 пикселей.
  2. Если вы хотите повторить дизайн образца сайта, установите для заливки прямоугольника светло-розовый цвет более светлого оттенка, чем для стандартного состояния кнопки. При необходимости также можно создать скругленные углы, введя значение радиуса скругления угла на панели элементов управления. В этом примере для всех четырех углов задано значение 10 пикселей.
Выбор прямоугольника и указание радиуса скругленных углов.
Выбор прямоугольника и указание радиуса скругленных углов.

  1. С помощью инструмента «Выделение» выровняйте прямоугольник так, чтобы его верхняя сторона находилась на расстоянии 5094 пикселей от верхнего края страницы. Также убедитесь, что левая сторона прямоугольника выровнена по вертикали с левой стороной кнопок. В этом примере прямоугольник и кнопки расположены на расстоянии 14 пикселей от левого края страницы. Чтобы увидеть эти параметры, выделите элемент и откройте панель «Перспектива». Значение X обозначает расстояние от левого края (14 пикселей), а значение Y — расстояние от верхнего края страницы (5094 пикселя).
  2. Не снимая выделения с прямоугольника, откройте панель «Эффекты прокрутки» и установите флажок «Перемещение» на вкладке «Перемещение». Задайте для исходной позиции значение 4979.
  3. Для начального перемещения настройте перемещение вправо со скоростью прокрутки (значение 1). Во всех остальных полях на вкладке «Перемещение» оставьте значение 0.
Применение эффектов прокрутки для создания эффекта появления прямоугольника на странице с левой стороны и его перемещения вправо до своего положения.
Применение эффектов прокрутки для создания эффекта появления прямоугольника на странице с левой стороны и его перемещения вправо до своего положения.

  1. Чтобы расположить прямоугольник за четырьмя кнопками, выберите меню «Объект» > «На задний план», не снимая выделения с прямоугольника.
  2. Выберите «Файл» > «Поместить», выберите файл изображения и нажмите один раз на странице, чтобы поместить его. В этом примере на страницу помещено изображение PNG с параметрами прозрачности и рисунком лампы. Рисунок лампы находится вверху большого прямоугольника, над правой стороной, вне области, которая будет закрыта кнопками меню. В этом примере изображение находится на расстоянии 501 пикселя от левого (значение X) и 5245 пикселей от верхнего края (значение Y) страницы.
  3. Чтобы расположить изображение за четырьмя кнопками, выберите меню «Объект» > «На задний план», не снимая выделения с изображения. Изображение должно быть расположено над большим прямоугольником, но за четырьмя кнопками.
  4. Не снимая выделения с изображения, откройте вкладку «Перемещение» на панели «Эффекты прокрутки» и установите флажок «Перемещение». Задайте для исходной позиции необходимое значение. В этом примере она имеет значение 4979 пикселей.
  5. В разделе «Начальное перемещение» настройте перемещение вправо со скоростью 0,75 от скорости прокрутки. Для всех остальных направлений задайте значение 0.
Настройка начального перемещения вправо со скоростью прямоугольника.
Настройка начального перемещения вправо со скоростью прямоугольника.

  1. С помощью инструмента «Текст» создайте текстовый фрейм. В этом примере текстовый фрейм содержит следующий текст: «Stack linked text frames with high contrast roll-overs to create unusual menus». Однако вы можете ввести любой текст. Оформите текст необходимым образом с помощью параметров на панели элементов управления. В этом примере к текстовому фрейму не применен цвет фоновой заливки.
  2. С помощью инструмента «Выделение» переместите текстовый фрейм в правую часть помещенного изображения. В этом примере текстовый фрейм имеет значение X — 357 пикселей (от левого края) и значение Y — 5136 пикселей (от верхнего края). Фактическое расположение зависит от текстового содержимого и примененных параметров форматирования.
  3. Пока текстовый фрейм выделен, выберите меню «Объект» > «На задний план» или переместите его с помощью панели «Слои» так, чтобы текстовый фрейм отображался за четырьмя кнопками, но над большим прямоугольником.
  4. Установите флажок «Перемещение» на панели «Эффекты прокрутки». Настройте исходную позицию, перетащив T-манипулятор или введя значение. В данном примере исходная позиция имеет значение 4979 пикселей, как у исходной позиции помещенного изображения (рисунок лампы).
  5. В разделе «Начальное перемещение» настройте перемещение текстового фрейма влево со скоростью в два раза ниже (0,5) скорости прокрутки. Во всех остальных полях введите значение 0.
Текстовый фрейм настроен перемещаться влево (в противоположном направлении прямоугольника и помещенного изображения) с более низкой скоростью.
Настройка текстового фрейма для перемещения влево с более низкой скоростью.

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

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

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

Подвижный фон

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

Для создания аналогичного эффекта подвижного фона выполните следующие действия.

  1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 6254 пикселей.

Примечание.

Для этого примера установка цвета заливки в браузере не имеет значения, т. к. страница заполнена прямоугольниками. Задайте для цвета заливки страницы значение «Нет».

  1. С помощью инструмента «Прямоугольник» нарисуйте прямоугольник в верхней части страницы. В этом примере ширина прямоугольника составляет 1159 пикселей, а высота — 1312 пикселей. С помощью инструмента «Выделение» поместите прямоугольник по центру страницу так, чтобы обе его стороны выходили за пределы окна браузера.
  2. Не снимая выделения с прямоугольника, установите фоновое изображение с помощью меню «Заливка». В меню «Подгонка» выберите «Мозаика» для размещения изображения в виде мозаики.
Установка мозаичного фонового изображения в качестве заливки прямоугольника.
Установка мозаичного фонового изображения в качестве заливки прямоугольника.

  1. При необходимости можно использовать меню «Эффекты», чтобы настроить эффект тени для создания вокруг прямоугольника эффектной границы.
  2. Не снимая выделения с прямоугольника с заливкой, откройте вкладку «Прокрутка» меню «Заливка». Установите флажок «Перемещение», а затем перетащите T-манипулятор или введите числовое значение в поле для настройки исходной позиции. В этом примере для исходной позиции установлено значение 512 пикселей. Однако при необходимости манипулятор можно сжать, чтобы выровнять его с верхней стороной прямоугольника.
  3. В разделе «Начальное перемещение» настройте перемещение прямоугольника вниз и влево со скоростью 0,2 от скорости прокрутки в каждом направлении. Задайте те же значения параметров в разделе «Конечное перемещение». 
Настройка параметров перемещения на вкладке «Перемещение» меню «Заливка».
Настройка параметров перемещения на вкладке «Перемещение» меню «Заливка».

  1. Повторите шаги с 2 по 6, чтобы создать еще один прямоугольник с заливкой. Расположите новый прямоугольник прямо под первым прямоугольником так, чтобы область заливки браузера не была видна, а между двумя прямоугольниками не было пустого пространства. Заполните новый прямоугольник другим мозаичным фоновым изображением.
  2. Повторите шаг 7, чтобы создать третий прямоугольник, расположенный прямо под вторым прямоугольником. С помощью меню «Заливка» установите для него другое мозаичное фоновое изображение. Для упрощения выравнивания прямоугольников на странице по вертикали рекомендуется отобразить все прямоугольники, уменьшив масштаб изображения с помощью меню «Просмотр».
Уменьшение масштаба и выравнивание трех больших прямоугольников по вертикали с помощью инструмента «Выделение».
Уменьшение масштаба и выравнивание трех больших прямоугольников по вертикали с помощью инструмента «Выделение».

Примечание.

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

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

  1. Выделите третий прямоугольник и обновите параметры на вкладке «Прокрутка» меню «Заливка». В разделе «Начальное перемещение» настройте перемещение прямоугольника вверх со скоростью 0,25 от скорости прокрутки и перемещение влево со скоростью 0,6 от скорости прокрутки. Установите такие же настройки в разделе «Конечное перемещение».
  2. Проверьте страницу, выбрав меню «Файл» > «Предварительный просмотр страницы в браузере». Прокрутите страницу вниз для проверки перемещения каждого прямоугольника с мозаичной заливкой по диагонали. При прокрутке страницы вверх прямоугольники продолжают перемещение.
  3. Закройте браузер и вернитесь в рабочую среду Muse.

Маски

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

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

Для создания аналогичного эффекта маски выполните следующие действия.

  1. В представлении «Дизайн» выберите «Страница» > «Свойства страницы». В поле «Мин. высота» задайте довольно высокое значение. В этом примере минимальная высота страницы составляет 6076 пикселей.
  2. Установите для заливки страницы и браузера сплошной белый цвет (или любой другой цвет и используйте его в дальнейшем для заполнения прямоугольников маски).
  3. С помощью инструмента «Прямоугольник» нарисуйте на странице большой прямоугольник. Ширина прямоугольника в этом примере составляет 804 пикселя, а высота — 489 пикселей.
  4. Задайте для цвета заливки прямоугольника значение «Нет». Установите цвет обводки по своему усмотрению. В меню «Обводка» установите для ширины обводки левой и нижней сторон прямоугольника значение 20, а для верхней и правой сторон значение 0, чтобы скрыть обводку. В результате этих действий создается основание столбчатой диаграммы.
     
Настройка обводки левой и нижней сторон прямоугольника в меню «Обводка».
Настройка обводки левой и нижней сторон прямоугольника в меню «Обводка».

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

  1. С помощью инструмента «Прямоугольник» нарисуйте два прямоугольника большего размера. Первый прямоугольник нарисуйте так, чтобы он был выровнен с левой стороной таблицы графика. В этом примере ширина прямоугольника составляет 657 пикселей, а высота — 1810 пикселей.
  2. Второй прямоугольник нарисуйте ниже таблицы графика, выровняв его с нижним краем. В этом примере ширина прямоугольника составляет 1002 пикселей, а высота — 1541 пикселей.
  3. Установите для обоих прямоугольников белый цвет заливки (или такой же цвет, как цвет заливки в браузере) и ширину обводки 0. С помощью инструмента «Выделение» выровняйте прямоугольники с двумя сторонами диаграммы.
Поместите два прямоугольника большего размера слева и ниже таблицы графика.
Поместите два прямоугольника большего размера слева и ниже таблицы графика.

  1. Не снимая выделения с прямоугольников, нажмите правой кнопкой мыши и выберите «Объект» > «Группировать», чтобы объединить оба маскирующих прямоугольника в группу.
  2. Не снимая выделения с группы прямоугольников, откройте вкладку «Перемещение» на панели «Эффекты прокрутки». Установите исходную позицию (в этом примере 1516 пикселей) и введите значение 0 во все четыре поля. Эта настройка означает, что группа прямоугольников не будет перемещаться ни до, ни после достижения исходной позиции. Группа будет оставаться на месте, как и таблица графика.
  3. С помощью панели «Слои» временно скройте и заблокируйте группу.
  4. Прокрутите страницу вниз до пространства ниже группы прямоугольников и с помощью инструмента «Прямоугольник» нарисуйте пять прямоугольников одинаковой ширины. В этом примере все столбцы имеют ширину 74 пикселя и разную длину. Высота пяти прямоугольников в этом примере составляет (слева направо): 141, 188, 292, 444 и 583. Зеленый цвет заливки всех прямоугольники совпадает с цветом обводки, определяющей левую и нижнюю границы диаграммы.
Расположение пяти прямоугольников на странице ступеньками.
Расположение пяти прямоугольников на странице ступеньками.

  1. Ниже приведено местоположение пяти прямоугольников (слева направо) по значениям X и Y:
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. Затем, выберите каждый прямоугольник, начиная с левого и двигаясь направо. Выбирая прямоугольники по одному, установите флажок «Перемещение» на вкладке «Перемещение» панели «Эффекты прокрутки» и введите следующие значения исходной позиции:
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. Пока все прямоугольники выделены, на панели «Эффекты прокрутки» настройте «Начальное перемещение» в направлении вверх со скоростью, равной скорости прокрутки (значение 1). Во всех других полях введите значение 0.
Одновременная настройка значений перемещения для всех пяти прямоугольников на панели «Эффекты прокрутки».
Одновременная настройка значений перемещения для всех пяти прямоугольников на панели «Эффекты прокрутки».

  1. Поместите на страницу изображение PNG с настройками прозрачности. В этом примере изображение PNG содержит рисунок розовой стрелки, направленной вверх зигзагом. Изображение PNG в этом примере имеет ширину 695 пикселей и высоту 443 пикселя. После размещения изображения на странице переместите его в положение с координатами X: 78 и Y: 3427.
  2. На панели «Слои» задайте положение файла PNG таким образом, чтобы оно было ниже первого и третьего (слева) столбцов диаграммы, но выше второго, четвертого и пятого столбцов.
Настройка изображения стрелки с помощью панели «Слои» для создания эффекта переплетения между столбцами графика.
Настройка изображения стрелки с помощью панели «Слои» для создания эффекта переплетения между столбцами графика.

  1. Не снимая выделения с изображения стрелки, откройте вкладку «Перемещение» на панели «Эффекты прокрутки» и установите флажок «Перемещение». Установите исходную позицию (в этом примере 3238 пикселей). В разделе «Начальное перемещение» настройте перемещение стрелки вправо и вверх со скоростью в обоих направлениях 0,25 от скорости прокрутки. В обоих полях раздела «Конечное перемещение» введите значение 0.
Изменение настроек перемещения на панели «Эффекты прокрутки».
Изменение настроек перемещения на панели «Эффекты прокрутки».

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

Образцы сайтов, на которых используются эффекты прокрутки

Посетите веб-сайт Demential Lab для просмотра функции эффектов прокрутки в действии.

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

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