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

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

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



Давайте заглянем за кулисы и узнаем, как эта магия создается.

Что такое параллакс-скроллинг?

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


Пример 2,5D-скроллинга, имитирующего появление 3D-сцены. Подготовлено пользователем Википедии Janke.

Приведенный пример часто называют 2,5D или псевдо-3D перспективой, поскольку он имитирует трехмерную картину.

Параллакс-скроллинг был популяризирован в 2D компьютерной графике и стал использоваться в видеоиграх с начала 1980-х годов. Многие считают, что впервые этот эффект применили в аркадной игре Moon Patrol. Эффект параллакса появился во многих популярных платформенных играх 80-90-х годов, например, в игре Sonic the Hedgehog.

В игре The Whispered World параллакс реализован с помощью композиции слоев. Ниже представлен изометрический вид слоев игры, каждый из которых выделен цветной рамкой:


Вид сбоку на слои, используемые для параллакс-скроллинга в игре The Whispered World.

При взгляде спереди слои составляют целостную сцену:


Вид спереди на слои, используемые для параллакс-скроллинга в игре The Whispered World.

Эта технику позаимствовали веб-дизайнеры, но популярной она стала только после появления в 2011 году HTML5 и CSS 3. С развитием CSS стало проще реализовать эффект параллакс-прокрутки без JavaScript и танцов с бубнами.

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

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

Зачем использовать эффект параллакс-скроллинга?

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

Повышение вовлеченности пользователей

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

Служит средством сторителлинга

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

Как реализовать эффект параллакса на CSS

Рассмотрим два метода реализации эффекта параллакса с помощью CSS: фиксация background position и использование 3D-сдвига.

Фиксация положения фона

Фиксация положения фона была самым ранним методом создания параллакс-эффекта с помощью CSS. Его можно рассматривать как реализацию 2,5D-параллакса.



Секрет этого метода заключается в использовании фонового изображения для section и фиксации его положения, как правило, с помощью параметра background-attachment:fixed. Когда пользователь прокручивает определенную секцию, фон не прокручивается, но прокручиваются другие элементы. Однако, когда пользователь прокручивает секцию дальше, фон меняется. За счет того, что эти элементы движутся с разной скоростью, создается эффект параллакса.

При использовании этого метода следует иметь в виду, что поддержка background-attachment:fixed в мобильных браузерах на момент написания статьи все еще остается проблематичной. Обходные пути решения этой проблемы мы рассмотрим далее в этой статье.

Чтобы лучше понять, как работает этот метод, давайте рассмотрим конкретный пример. Ниже представлен полностраничный пример, демонстрирующий активности, доступные на горе Cerro Torre в Аргентине:

Компоновка дизайна

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

Ниже привожу обзор дизайна веб-страницы. Мы создаем дизайн, в котором параллаксная секция чередуется с непараллаксной — я называю это «буферной» секцией:



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

Например, на экране с разрешением 1920px, если мы прокрутим вниз большую часть первой секции параллакса, мы увидим середину горного фона во второй секции параллакса:



Без первой «буферной» секции мы увидим приведенное ниже изображение в том же положении на странице. Можно заметить, что первоначальный вид горного фона второй параллаксной секции выше:



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


Ключевым моментом при создании контейнера параллакса является установка свойства background-image с выбранным изображением, а затем установка свойства background-attachment в значение fixed. Значение fixed фиксирует положение фонового изображения относительно вьпорта.

Масштабирование дизайна

Использование background-size: cover; для масштабирования изображения до минимально возможного размера, чтобы заполнить контейнер с сохранением соотношения сторон, необязательно, но в целом целесообразно. В приведенном ниже коде я также центрирую положение фонового изображения с помощью background-position: center:

.parallax-container {
  /*  здесь происходит магия: */
  background-image: url("https://images.unsplash.com/photo-1519120944692-1a8d8cfc107f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;

  /* размеры важны, убедитесь, что он достаточно высок для прокрутки */ 
  min-height: 100vh;

  /* Свободно размещайте элементы контейнера с помощью flexbox или любыми другими средствами. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Также необходимо помнить о размерах контейнера параллакса: он должен быть достаточно высоким, чтобы не требовать слишком большой прокрутки. Простой способ — установить для контейнера параллакса значение min-height: 100vh, чтобы его высота была не меньше высоты экрана, независимо от содержащихся в нем элементов.

Решение проблем совместимости с мобильными браузерами

На момент написания статьи все еще остаются проблемы с background-attachment: fixed в мобильных браузерах. Чтобы лучше понять эти проблемы, ознакомьтесь с документацией. К счастью, есть несколько вариантов преодоления несовместимости с мобильными браузерами.

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

/* Отключите параллакс-прокрутку для всех планшетов и телефонов. При необходимости увеличьте/уменьшите количество пикселей */
@media only screen and (max-device-width: 1366px) {
  .parallax-container {
    background-attachment: scroll;
  }
}

Муртузаали Сурти (Murtuzaali Surti) написал о приеме с фиксированным фоном и показал, как проявляются баги в мобильных браузерах при использовании background-attachment: fixed. Вкратце, Муртузали предлагает создать элемент с фоновым изображением с помощью position: fixed, поместить содержимое в отдельный элемент, а затем расположить его абсолютно поверх или над фоновым элементом.

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

Плюсы и минусы фиксации положения фона

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

Использование 3D сдвигов

В CSS мы можем позиционировать элементы в трех измерениях; мы можем позиционировать элементы вдоль оси z, чтобы увеличить или уменьшить воспринимаемое расстояние между пользователем и элементом:



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

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

Для достижения эффекта параллакса воспользуемся тремя CSS-свойствами: position, perspective и transform, чтобы разложить и сгруппировать элементы по слоям. Затем с помощью функций трансформации translateZ() и scale() мы будем управлять скоростью прокрутки и размерами слоев относительно perspective, заданной на родительском элементе.

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

• Преобразования CSS: Свойства transform являются основой CSS, особенно важно понять 3D-аспект.
• z-index: укладывание элементов с помощью свойств position и transform может привести к ситуациям, когда слои укладываются не так, как вы ожидаете. transform создает новый контекст укладки, поэтому может потребоваться вмешательство и управление z-index слоев в зависимости от дизайна.
• Overflow: при работе в 3D с наложением элементов необходимо помнить о переполнении.

В 2014 году Кит Кларк написал фундаментальное руководство по методу 3D-сдвига. В нем отлично изложена суть метода, хотя и немного не хватает реалистичных примеров, которые бы облегчили восприятие.

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

Демонстрация параллакс-скроллинга

Давайте создадим базовый пример параллакс-скроллинга с тремя слоями, содержащими текст и различные цвета фона. Ниже приведен HTML:

<div class="parallax">
<!--layer 1 will be the bottom layer, layer 3 will be the top layer-->
<div class="parallax-layer layer1">LAYER 1</div>
<div class="parallax-layer layer2">LAYER 2</div>
<div class="parallax-layer layer3">LAYER 3</div>
</div>

Ниже приведен базовый CSS, который можно использовать повторно:

/* Если не убрать margin, то в div .parallax появится вертикальная полоса прокрутки */
body {
  margin: 0;
}

/* parallax "viewport" */
.parallax {
  height: 100vh;

  overflow-x: hidden;
  overflow-y: auto;

  perspective: 1px;
}

.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.layer1 {
  transform: translateZ(0);
}

.layer2 {
  transform: translateZ(-1px);
}

.layer3 {
  transform: translateZ(-2px);
}

В этом CSS-коде следует отметить несколько моментов. Во-первых, вся магия происходит в классе parallax. Определение свойств элемента height и perspective создает 3D-вьюпорт с фиксированным началом.

Свойство perspective определяет, на каком расстоянии от пользователя находится объект. Я выбрал значение 1px для свойства perspective для класса parallax, что означает, что мы находимся очень близко к div. При желании это значение можно увеличить:

top: 10rem;

  width: 100%;
  height: 50rem;

  background-color: green;
}

.parallax-layer.layer3 {
  top: 20rem;

  width: 100%;
  height: 50rem;pronounced parallax effect.

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

Уменьшение значения для translateZ() отодвигает элемент дальше, и он прокручивается медленнее. Чем дальше значение от нуля, тем сильнее выражен эффект параллакса. translateZ(-5px) будет прокручиваться медленнее, чем translateZ(-1px).

Помимо базового CSS, всегда следует учитывать высоту слоев. Если у слоя нет большого количества содержимого, он может быть слишком мал для создания достаточно высокого контекста прокрутки. Кто-то предпочитает задавать размер по умолчанию в .parallax-layer, но это уже на ваше усмотрение.

Положение слоев можно изменять в соответствии с дизайном, используя свойства top, right, left и bottom. Кроме того, мы можем использовать функцию translate3d() для перемещения элемента по осям x и y.

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



Далее сделаем высоту слоев 2 и 3 вдвое меньше высоты слоя 1, чтобы каждый слой был отчетливо виден. Затем расположим слой 2 ниже по оси y с вершиной, чтобы он начинался ниже слоя 1. Аналогично поступим со слоем 3, чтобы он начинался ниже слоя 2:

.parallax-layer.layer1 {
  width: 100%;
  height: 100rem;

  background-color: red;
}

.parallax-layer.layer2 {
  top: 10rem;

  width: 100%;
  height: 50rem;

  background-color: green;
}
.parallax-layer.layer3 {
  top: 20rem;

  width: 100%;
  height: 50rem;

  background-color: blue;
}

div{
  font-size: 50px;
  text-align: center;
}

В полноэкранном режиме он напоминает матрешку:



Вы заметили, что несмотря на одинаковую высоту слоя 2 и слоя 3, слой 3 кажется короче слоя 2? Это связано с 3D-трансформацией, о которой мы говорили ранее. Слой 3 находится дальше, поэтому он кажется меньше. Для того чтобы они казались одинаковыми по размеру, можно использовать функцию scale().

Интересно, почему слой 1 является нижним? В HTML div слоя 1 располагается перед div слоя 3. Эти div позиционируются абсолютно, а значит, слой 3 должен быть верхним, поскольку он занимает последнее место в DOM. transform создает новый контекст укладывания, в результате чего каждый div оказывается выше предыдущего. Таким образом, порядок слоев является обратным порядку в DOM.

Важно помнить, что первый элемент в контейнере или секции параллакса станет нижним слоем. Может оказаться неожиданностью, что div «parallax» будет иметь видимую полосу прокрутки, если есть margin от тела, что является стандартом, как показано ниже. Это происходит потому, что слои выше контейнера, поэтому они переполняются:



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

Примеры использования 3D-сдвигов

Чтобы узнать, как создать параллаксную секцию, посмотрите этот видеоурок. Вот CodePen для рассмотренного примера:


Чтобы попробовать повторить сайт Firewatch, используйте CodePen с довольно хорошим воссозданием CSS; код написан lemmin:


Взяв за основу версию с оригинальными иллюстрациями Firewatch, Сэм Бекхэм написал небольшую статью. Вот CodePen этого примера:


Следующий уровень изложения техники — это интересная работа Линны Фишер на микросайте Matterday. Я думаю, что липкое мини-«окно» для каждого фона, проходящее под другим контентом, — это действительно новинка:


Линн написала отличную статью в своем блоге о том, как она создала этот эффект. Код доступен на GitHub.

Плюсы и минусы использования 3D-сдвигов

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

Где можно использовать параллакс-скроллинг?

Чтобы вдохновиться примерами использования параллакс-скроллинга, посмотрите статью Adobe «10 лучших примеров параллакс-дизайна веб-сайтов». Еще один хороший ресурс для вдохновения — Dribble.

Лучшие практики работы с параллакс-скроллингом

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

Используйте параллакс-скроллинг в правильных местах

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

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

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

Не мешайте естественной прокрутке

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

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

Отзывчивый дизайн

Поскольку около 59% всего веб-трафика поступает с мобильных устройств, крайне важно обеспечить правильную работу с мобильных устройств. На мобильных устройствах параллакс может работать неправильно. Стоит ограничить или отключить его на мобильных устройствах, чтобы обеспечить пользователям положительный опыт.

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

Производительность

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

По данным Google, при увеличении времени загрузки страницы с одной до трех секунд вероятность отказов увеличивается на 32%. Скорость влияет на конечный результат. Проведенное Google исследование показало, что улучшение скорости работы сайта всего на 100 мс приводит к тому, что розничные покупатели тратят почти на 10% больше.

Для параллаксной секции это особенно важно. От секции с изображениями обычно зависит скорость загрузки основного контента страницы (Largest Contentful Paint (LCP)), что является одним из показателей производительности Google Core Web Vitals. Быстрый LCP позволяет убедить пользователя в полезности страницы.

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

• Если вы используете фоновые изображения, убедитесь, что они предварительно загружены с помощью в разметке HTML. Как правило, любые элементы img идентифицируются сканером предварительной загрузки браузера для оптимизации загрузки.
• Чтобы уменьшить размеры файла, сожмите изображения с помощью библиотеки типа Sharp.
• Используйте синтаксис отзывчивых изображений в img или picture для создания различных разрешений одного и того же изображения, чтобы браузер мог использовать наименьшую версию, соответствующую разрешению экрана.
• Используйте форматы изображений нового поколения с высоким сжатием, например WebP и AVIF. С помощью элемента picture можно предлагать различные форматы и предоставлять браузеру самому решать, какой из них использовать.

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

Доступность

Анимация, основанная на движении, может вызывать дискомфорт у людей с повышенной чувствительностью к движению или отвлекать внимание у людей с нарушениями внимания. Вы можете уменьшить скорость параллакс-прокрутки или отключить ее для чувствительных пользователей с помощью запроса @prefers-reduced-motion:

@media (prefers-reduced-motion) {
  /* стили, которые будут применяться, если в настройках пользователя установлено уменьшенное движение */
}

Зачем использовать CSS вместо JavaScript?

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

Компания Sketch написала о параллаксе в своем дизайнерском блоге, где рассказала о том, как она реализовала тонкий эффект параллакс-прокрутки на главной странице своего сайта. Они использовали JavaScript-фреймворк под названием Stimulus:

Как объясняет Ричард, это было просто и с точки зрения разработки:

«Мы используем сверхминиатюрный JS-фреймворк Stimulus. Он позволяет нам создавать небольшие компоненты JavaScript, которые управляются атрибутами данных HTML. Всего несколько дополнительных параметров HTML-данных позволили команде управлять горизонтальной и вертикальной скоростью в зависимости от скорости прокрутки. Таким образом, в виртуальном пространстве крупные объекты и элементы могут двигаться медленнее, а мелкие — быстрее».

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

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

Помните также, что это не взаимоисключающий выбор. Можно использовать в основном CSS и немного JavaScript. Кейфреймеры показали интересный пример этого в потоке кодирования. Вот сопутствующий CodePen:


Очень важно придерживаться сбалансированного подхода. Не следует ограничиваться убеждениями, что все дело в CSS и JavaScript.

Бывает, что действительно приходится обращаться к JavaScript. Например, анимированная прокрутка требует использования JavaScript. Лучшей библиотекой JavaScript для веб-анимации, на мой взгляд, является GreenSock.

Заключение

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

Подробнее тему создания эффекта параллакс рассмотрим сегодня вечером на открытом уроке. А именно разберем способ с использованием HTML+CSS+JS. Присоединяйтесь!