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

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

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

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

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

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

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

Включение эффектов прокрутки : на панели «Эффекты прокрутки» отображается вкладка «Перемещение» (крайняя слева). Выделив элемент на странице, установите флажок «Перемещение».
СОВЕТ. Обратите внимание, что после установки этого флажка на уровне верхнего края элемента появится T-образный маркер. T-образный маркер указывает на исходную позицию эффекта прокрутки, примененного к элементу. Эффект прокрутки начинает работать, когда во время прокрутки страницы посетитель достигает исходной позиции.
T-образный маркер по умолчанию отображается над элементом. Однако его можно щелкнуть и перетащить вверх или вниз, чтобы разместить его вровень с верхним краем нужного элемента, либо перетащить маркер вниз и разместить под элементом.
Перемещение T-образного маркера для установки исходной позиции : чтобы задать исходную позицию, перетащите T-образный маркер в нужное место. Это позволяет настроить перемещение, которое будет выполняться до и после того, как прокручиваемая страница достигнет верха T-образного маркера.
Также можно ввести числовое значение в поле «Исходная позиция», расположенное по центру панели «Эффекты прокрутки» при выборе вкладки «Перемещение». В этом примере для исходной позиции установлено значение 200 пикселей.
Положение T-образного маркера обозначает исходную позицию элемента. При прокрутке страницы по вертикали применяются настройки, заданные в разделе «Начальное перемещение»: позиция элемента соответствует его положению в представлении «Дизайн».
Как только посетитель начнет прокручивать страницу или щелкнет ссылку привязки для перехода к разделу, расположенному ниже исходной позиции элемента, в силу вступают настройки, заданные в разделе «Конечное перемещение».
В разделе «Начальное перемещение» имеются кнопки со стрелками перемещения по горизонтали и вертикали, а также настройки управления скоростью перемещения.
Настройка начального перемещения в вертикальном направлении : выберите вертикальное направление перемещения (вверх или вниз), нажав одну из кнопок со стрелками вверх или вниз. Введите значение в поле рядом с кнопками направления по вертикали, чтобы задать скорость перемещения элемента относительно скорости прокрутки страницы. Если ввести значение 0, то элемент не будет перемещаться по вертикали. Также можно указать скорость в процентах с помощью десятичной запятой. Например, если ввести значение «0,5», то элемент будет перемещаться по вертикали со скоростью, в половину меньшей скорости прокрутки страницы.
Настройка начального перемещения в горизонтальном направлении : задайте настройки перемещения элемента по горизонтали (влево или вправо), нажав кнопки со стрелками влево или вправо, чтобы задать направление, в котором элемент будет перемещаться до достижения своей исходной позиции. В поле справа от стрелок перемещения по горизонтали укажите значение скорости перемещения по горизонтали. Если требуется, чтобы элемент не двигался в этой плоскости, задайте для скорости перемещения по горизонтали значение «0».
Повторите шаги 7 и 8, чтобы задать направление и скорость перемещения в разделе «Конечное перемещение».

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

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

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

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

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

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

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

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

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

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

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

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

Примечание.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Работа со вкладкой «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» панели «Эффекты прокрутки».

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

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

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

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

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

Примечание.

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

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

Мы будем называть scroll-эффектами любые сценарии и приемы, реализуемые на веб-странице, так или иначе связанные с направлением и/или позицией прокрутки этой страницы относительно окна браузера.

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

1. Parallax (Параллакс).

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

Для справки, вот определение из википедии: “Паралла́кс (греч. παραλλάξ, от παραλλαγή, «смена, чередование») - изменение видимого положения объекта относительно удалённого фона, в зависимости от положения наблюдателя.”

3. Sticky (Прилипание)

Суть техники заключается в том, что элемент при скролле ведет себя как position: relative относительно своего родителя, пока его верхняя граница не достигнет верхнего края окна (viewport-a). При дальнейшем скролле вниз элемент ведет себя как position: static , будто отвязывается от родителя и “прилипает” к границе окна. Вот, к примеру, демо , в котором верхняя панель навигации реализована c эффектом “sticky”.

Этой техникой также можно пользоваться для “прилепливания” элементов к нижней, левой или правой границе экрана, в зависимости от позиции и направления скролла.

Надо сказать, что СSS свойство position: sticky (позволяет с легкостью реализовывать подобные эффекты без применения javascript) описано в черновике спецификации CSS Positioned Layout Module Level . Но вот с поддержкой браузерами пока совсем туго .

4. Reversed sticky (Реверсное прилипание).

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

5. Progress bar (Индикатор прокрутки).

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

6. Accordion (Аккордеон).

Этот сценарий подразумевает последовательное применение stcicky -эффекта к заголовкам разделов страницы при скролле. А вот и демо

7. Menu Spy (Сопровождающее меню).

Этот сценарий хорошо известен под именем scroll spy в twitter bootstrap. Он подразумевает подсветку пунктов меню навигации, в зависимости от положения скролла, например, как в этом демо .

8. Staging (Сцена).

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

Общие проблемы при реализации любых сценариев со скролл-эффектами.

Во-первых , при написании скролл-эффектов нужно учитывать большое количество факторов и величин:

Размер всего документа.
Размеры и позиции элементов, участвующих в сценарии, а также в некоторых случаях и их контейнеров.
Размер и текущее положение видимой части документа (viewport) при скролле.
Направление скролла.
Адаптация при изменении размеров окна с отзывчивым (responsive) дизайном

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

В-третьих , на мобильных девайсах все работает плохо и с тормозами. Javascript изначально работает медленнее. В добавок к этому, мобильные браузеры блокируют выполнение javascript во время скролла.

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

Что такое Scroolly?

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

Правила, их границы и области действия.

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

Чтобы было проще понять о чем идет речь, приведу абстрактный пример:

Нужно плавно показать и плавно скрыть некоторый элемент, когда при скролле он будет входить в область видимости и выходить из нее. Элемент должен начать появляться после того, как его верхняя кромка будет на 100px выше нижней границы видимой области окна и полностью появится, когда его нижняя кромка будет на 100px выше нижней границы видимой области окна. Та же логика с исчезновением, только в симметрично обратном порядке.
Элемент нужно повернуть на 180° во время скролла, пока он будет находится в зоне ±30% от центра видимой зоны.

Чертовски сложно воспринимается на слух, не правда ли? Лучше посмотрим на .

Давайте договоримся, что мы будем называть видимую область документа словом “viewport”. К сожалению, я не могу найти короткий русский аналог этого слова:)

В итоге, здесь мы можем выделить 3 области действия правил c 6-ю границами. Давайте опишем их:

совпадает с нижней границей viewport (элемент начинает появляться)
совпадает с нижней границей viewport (элемент заканчивает появляться)
Точка, находящаяся на 30% ниже центра viewport, совпадает с центром элемента (элемент начинает поворот)
Точка, находящаяся на 30% выше центра viewport, совпадает с центром элемента (элемент заканчивает поворот)
Точка, находящаяся на 100px ниже верхней границы элемента, совпадает с верхней границей viewport (элемент начинает исчезать)
Точка, находящаяся на 100px выше верхней границы элемента, совпадает с верхней границей viewport (элемент заканчивает исчезать)

А теперь подумайте, с чего Вы начали бы описывать всю эту логику? Даже в таком простом сценарии с одним элементом в вычислениях участвуют размер документа, размер viewport, положение viewport, размер элемента, положение элемента, положение скролла… черт возьми, как же не запутаться?

Scroolly спешит на помощь.

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

el-top = vp-bottom - 100px (элемент начинает появляться)
el-bottom = vp-bottom - 100px (элемент заканчивает появляться)
el-center = vp-center + 30vp (элемент начинает поворот)
el-center = vp-center - 30vp (элемент заканчивает поворот)
el-top = vp-top + 100px (элемент начинает исчезать)
el-bottom = vp-top + 100px (элемент заканчивает исчезать)

А весь сценарий описывается так:

$(".my-element").scroolly([ { from: "el-top = vp-bottom - 100px", to: "el-bottom = vp-bottom - 100px", cssFrom:{opacity:".0"}, cssTo:{opacity:"1"} }, { from: "el-center = vp-center + 30vp", to: "el-center = vp-center - 30vp", cssFrom:{"transform": "rotate(0deg)"}, cssTo:{"transform": "rotate(180deg)"} }, { from: "el-top = vp-top + 100px", to: "el-bottom = vp-top + 100px", cssFrom:{opacity:"1"}, cssTo:{opacity:".0"} } ]);

Где vp – viewport, а el – элемент. Также можно пользоваться абстракциями doc для документа и con для контейнера элемента. А теперь об этом подробнее и с картинками…

У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:

viewport: vp-top , vp-center , vp-bottom
элемент: el-top , el-center , el-bottom
контейнер: con-top , con-center , con-bottom
документ: doc-top , doc-center , doc-bottom

Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:

Документация

Если Вас заитересовал плагин scroolly обязательно посмотрите официальную документацию. А она существует, и даже представлена в 2-х вариантах:

Для ленивых и нетерпеливых – github.com/chayka/jQuery.Scroolly/wiki/Short-Story
Для неторопливых и вдумчивых – github.com/chayka/jQuery.Scroolly/wiki/Long-Story

Ну и самое главное: обязательно посмотрите видео с нашей конференции

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Flat design vs Realism

На чьей стороне вы?

С подачи таких гигантов как Microsoft, Google и Apple, (flat design) в мгновение ока стал хитом сезона и предметом обсуждения сотен новостных лент и блогов. Он воспринимался как некий прорыв в области веб-дизайна и, вероятнее всего, таковым и являлся на самом деле. Интерактивное агентство intact решило обратить внимание своих клиентов на этот довольно необычный этап в развитии виртуального дизайна и подготовило интерактивное путешествие, снабдив его заголовком «Плоский дизайн против реализма». Все это создано, безусловно, не без помощи новомодного эффекта.

Креативный директор агентства Алехандро Лазос (Alejandro Lazos) поясняет, что самым нетривиальным оказалось объединить HTML5-игру и параллакс-скроллинг.

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

2. Sony

Такого вы еще нигде не видели!

Презентовать свой товар так, как это делает корпорация Sony, не умеет, наверное, никто на свете. Представленный лендинг — это часть агитационной кампании Sony «Be Moved» (с англ. be moved — будь в движении), о которой они говорят следующее:

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

3. Costa Coffee

Агентство Graphite Digital остановило свой выбор на иллюстрациях, наиболее выразительно представляющих продукцию компании

Этот впечатляющий одностраничник — детище брайтонского агентства Graphite Digital. В недавнем прошлом перед агентством была поставлена задача: ярко и интересно представить продукт компании Costa Coffee.

Результат работы заслуживает всяческих похвал. Лендинг выглядит роскошно. Он наполнен всяческими интерактивными элементами и анимированными иллюстрациями.

4. Highway One

Большой вес изображений оказался главной проблемой для разработчиков

Этот потрясающий микросайт, разработанный ньюкаслским агентством «Shout Digital» для туристического агентства «Exsus» (компания специализируется на дорогом отдыхе и организации медовых месяцев) — еще один замечательный пример рассматриваемой нами темы. Их выполненная в ретростиле мультипликация мгновенно захватывает ваше внимание и уже не отпускает до финальных титров.

За рулем классического «Кадиллак Эльдорадо» (Cadillac Eldorado) 1959 года выпуска вы посетите все знаменитые места калифорнийского побережья. На первый взгляд, все эффекты кажутся простыми, но как только вы начнете скроллинг, перед вами откроется истинная магия.

5. Make Your Money Matter

Управляйте своими финансами так, как это советует сайт Make Your Money Matter

Тема денег и личных финансов интересна многим, поэтому нью-йоркское digital-агентство «Firstborn» при подготовке заказа для кредитного союза предпочла инновационный формат традиционному.

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

6. Cyclemon

Целевая страница покажет вам все существующие виды велосипедов

Китайские мудрецы говорят: «Ты то, что ты ешь». Для дизайнеров и больших любителей байков Ромейна Боурдиукса (Romain Bourdieux) и Томаса Помарелли (Thomas Pomarelle) эта известная мудрость звучит так «Ты то, на чем ты ездишь». Их созданный в соавторстве сайт удивит вас не только новомодным скроллингом, но и прекрасным чувством юмора и первоклассными иллюстрациями.

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

7. Lexus

Вы можете опробовать автомобиль, оставаясь дома в своем уютном кресле

Благодаря этому сайту вы можете опробовать новую модель из линейки Lexus, не выходя из дома. Разработанное консалтинговым digital-агентством Amaze интерактивное видео обеспечит вас полной и весьма наглядной информацией по интерьеру и экстерьеру автомобиля Lexus IS. Эффект присутствия обеспечен.

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

Венди Стоунфилд (Wendy Stonefield), коммерческий директор Amaze, отмечает: «Использование HTML5 позволило нам достичь нескольких целей. Во-первых, это наглядная демонстрация автомобиля, его функциональных особенностей. Во-вторых, это интерактивность, без которой не обходится ни один современный проект: в данном случае мы позволяем пользователям выбирать цвет салона и кузова автомобиля. Создавая видео, мы ориентировались на искушенного зрителя — и с теми технологиями, что существуют сегодня, это стало более чем возможным. Мы показали Lexus IS таким, какой он на самом деле есть».

8. Life in my Shoes

Life in my Shoes (с англ. — глазами другого человека) — это амбициозный проект, главной задачей которого является искоренение страха и предубежденности в отношении ВИЧ-инфицированных и повышение осведомленности молодого поколения по вопросам ВИЧ и СПИД. У лондонского агентства Traffic было задание спроектировать лендинг, способный привлечь внимание молодой аудитории и завоевать ее доверие, и они с ним великолепно справились.

Фирменный шрифт Houshka Rounded Medium был реализован с поддержкой синтаксиса font-face, отчего страница стала выглядеть живее и интереснее. Прочие декоративные элементы наряду с использованием желтого цвета сделали ресурс эстетически привлекательным.

9. The Beast

Новая целевая страница известной фолк-певицы читает стихи и сопровождает их невероятными образами

Для продвижения нового альбома известной фолк-певицы Лауры Марлинг (Laura Marling) «A Creature I Don"t Know» (с англ. — Незнакомое мне создание) лондонское digital-агентство Studio Juice разработало удивительный лендинг пейдж, который читает стихи, сопровождая их изысканными иллюстрациями и выразительными анимациями.

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

10. The Lab

Alzheimer’s Research, ведущее учреждение в Великобритании, занимающееся изучением болезни Альцгеймера, задалось целью рассказать о своей деятельности и ее результатах в увлекательной и доступной форме. Для этого и был создан ресурс The Lab.

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

11. Why Your Brain Craves Infographics

Инфографика об инфографике!

NeoMam Studios отметились замечательным паралакс-скроллинг лендингом, освещающим основные достоинства инфографики как метода подачи информации.

«Параллакс-скроллинг — это самое трудное, что пришлось реализовывать нашим разработчикам», — делится опытом Дэнни Эштон (Danny Ashton), директор компании. «Все доступные библиотеки они посчитали банальными, поэтому вместо этого создали собственные».

12. 5emegauche

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

13. Atlantis World’s Fair

Необычный скроллинг здесь работает не столько на зрелищность, сколько на сюжет

Эта онлайн-инфографика разработана Френком Чимеро (Frank Chimero), который использовал параллакс-скроллинг не только для того, чтобы более выгодно представить информацию, но и для того, чтобы анимировать ее и вписать в рамки определенного сюжета. Высший пилотаж!

14. Every last drop

Узнай о глобальной проблеме нехватки чистой воды!

Анимационная студия Nice & Serious спроектировала этот лендинг, чтобы обратить внимание общественности на проблему дефицита чистой воды на планете. Куда мы тратим воду? Где мы могли бы ее сэкономить? Как это сделать? Вы узнаете об этой проблеме все. Все до последней капли.

15. Living Word

Перед digital-агентством Tribal была поставлена задача: обновить интернет-представительство агентства переводов Living Word и сделать его информативным и интересным. На результат вы можете полюбоваться сами, но сразу скажем, что британцы не придумали ничего необычного, но сделали все аккуратно и чисто.

16. Madwell

Параллакс-скроллинг добавляет толику глубины в лендинг агентства Madwell

Агентство по развитию предпринимательства Madwell, расположенное в Нью-Йорке, использует посадочную страницу для презентации собственного портфолио. Параллакс-скролинг является некой изюминкой в организованном ими действе: получившийся 3D-эффект добавляет глубины в их творение.

17. The Jacksonville Downtown Art Walk

The Jacksonville Downtown Art Walk — это традиционный ежемесячный праздник культуры и искусства в городе Джексонвилль, штат Флорида. Фестиваль растягивается на 15 кварталов и состоит из дюжин галерей, музеев и баров. Все это сопровождают уличные актеры и музыканты. Красивый сайт, рассказывающий об этом мероприятии, способен принести радостное настроение и в ваш дом.

18. Von Dutch

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

19. Fannabee

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

20. Peugeot Hybrid4

Новые технологии нужно презентовать по-новому, не так ли?

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

21. Cultural Solutions

Cultural Solutions — это консалтинговое агентство, которое, как легко догадаться из названия, занимается решением вопросов в области искусства. Логотип компании — это разноцветные круги, наложенные друг друга. Именно поэтому на главной странице сайта эти круги и обыгрываются с помощью параллакс-эффекта. Кружки двигаются с разной скоростью, и это добавляет глубины и объема. Получилось лаконичное, но весьма емкое и стильное высказывание.

22. jQuery Conference

Разработчики сайта jQuery Conference не забывают о главном: они придерживаются верного баланса между информативностью и эффектностью

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

23. Shape

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

24. Nintendo

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

25. Activate Drinks

Просто открутите крышку, и действие начнется

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

26. The Whitehouse’s Iraq Timeline

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

27. Pitchfork Cover Stories

Известный музыкальный сайт Pitchfork громко заявил о себе, выступив с амбициозным проектом «Cover Stories». Интернет-ресурс приобрел некоторые черты печатного глянцевого журнала, но применение эффекта параллакса для сайта, интерактивных видео, интервью и уникальных фотографий сделали его непохожим ни на что. Анимированные портретные фото, одухотворенный текст и идеально подобранный саундтрек — очень красноречиво и изысканно.

28. Soleil Noir 2012 | We believe in…

Подкупающий минимализм от французов из Soleil Noir

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

29. Oakley

Oakley объединяет потрясающий параллакс-скроллинг и выразительные фотографии

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

30. Jason Kenny OBE

Лендинг трижды олимпийского и дважды мирового чемпиона в велосипедных гонках Джейсона Кенни (Jason Kenny)

Ранее в этом году бристольское маркетинговое агентство Fiasco Design разработало этот замечательный landing page для трижды олимпийского и дважды мирового чемпиона в велосипедных гонках Джейсона Кенни (Jason Kenny). Сооснователь агентства Бен Стирс (Ben Steers) заявляет: «Опираясь на техническое задание, мы решили создать создать одностраничный сайт с вертикальным скроллингом и параллаксом».

31. La Moulade

Навигационная панель позволит вам быстро и легко переместить в нужную область страницы

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

32. Walking Dead

Самое трудное — это объединить воедино достижения всех технологий

«В первую очередь, мы сами фанаты этого шоу», — делится впечатлениями от работы над проектом ведущий дизайнер Гейвин Бек (Gavin Beck). — В наших планах было создать сайт, соответствующий миру «Ходячих мертвецов», который поклонники сериала оценили бы и изучили. Чтобы достичь своих целей, мы использовали такие новые разработки, как HTML5, CSS3, JavaScript/jQuery, Web Audio/HTML5 Audio и, конечно же, параллакс-скроллинг. Самой трудной задачей было заставить все эти технологии работать вместе и быть доступными для всех видов платформ».

33. New York Times: Tomato Can Blues

Быть может, это и есть будущее онлайн-журналистики?

В эпоху, когда люди не обременяют себя чтением газет и журналов, многие журналисты задаются вопросом, как же привлечь внимание аудитории к печатному слову. Один из вариантов преодоления кризиса предложила американская газета The New York Times, которая разработала новую форму представления журнальных статей и рассказов — одностраничный сайт, созданный с применением новейших разработок в области веб-дизайна и оформленный иллюстрациями за авторством Аттилы Футаки (Atilla Futaki).

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

34. Health Service Payouts

Ничего сложного, казалось бы, но выглядит довольно занимательно

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

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

Сотрудник агентства, разработавшего этот лендинг, делится впечатлением от работы: «Чтобы создать этот сайт, мы применили новые технологии в HTML5, CSS3 и JavaScript. Так как анимации — это ключевой элемент, мы использовали, главным образом, библиотеки анимации “skrollr”. Каждый элемент мы прорисовывали вручную, а финальные штрихи добавили с поддержкой CSS3».

35. We are Unfold

Идеальная игра разных видов скроллинга

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

36. Savings Challenge

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

Плагин Stellar.js

Stellar.js — это плагин, с помощью которого можно применить эффект параллакса к любому прокручиваемому объекту. Хотя этот плагин больше не поддерживается, он используется многими разработчиками благодаря своей стабильности и совместимости с последними версиями jQuery.

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

Заключение

Мир не стоит на месте, и каждый день появляются новые произведения искусства в области веб-дизайна. Будете ли вы среди этих героев? Легко, если возьмете на вооружение эти прекрасные технологии. Но не забывайте о главном: любой внедренный эффект должен способствовать повышению конверсии! Иначе он вам просто не нужен.

Платформа LPgenerator, точнее говоря, наш визуальный редактор, поддерживает параллакс-эффекты; убедитесь в этом сами на примере шаблонов в магазине целевых страниц LP Store

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

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

С другой стороны, параллакс эффекты не всегда работают на мобильных устройствах.

Ниже, я приведу 5 интересных вариантов параллакс эффектов и стилей.

1. Анимация, демонстрирующая изменения

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

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

На примере выше, Porsche Evolution показывает изменения во времени в фоне, и новую модель машины на переднем плане каждого изображения. Музыка также меняется в зависимости от десятилетия.

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

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

2. Способствует использованию прокрутки

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

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

Для поощрения взаимодействия, веб-сайт Walking Dead использует нечто другое – скроллинг проводит пользователя по стилизованным под комиксы горизонтальным экранам.

3. Движение и цвет

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

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

4. Улучшение усвоения информации

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

На странице «about», сайта Мелани Дэйвид находится длинное введение, при этом, элемент навигации «About», расположенный слева, не двигается во время прокрутки текста. Когда текст оканчивается, обе части страницы переходят к новой секции. Это отличное решение для случаев, когда блок текста длиннее, чем обозримый участок контента.

Ресторан Le Duc использует отдельные блоки для каждой секции меню. Анимация довольно проста, и помогает лучше усвоить информацию.

5. Визуализируйте цифровую реальность

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

Один из классических примеров сайта, применяющих параллакс анимацию – сайт Seattle Space Needle. Они используют восходящую прокрутку, чтобы показать посетителю, как будет выглядеть город с высоты птичьего полета.

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

Заключение

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

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

Используйте параллакс тогда, когда он хорошо работает с вашим контентом.

Перевод статьи Кэрри Казинс