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

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

Параллакс в играх. Дэн Рут

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

<section class="parallax"><!-- Контейнер для прокурчиваемого содержимого. У него мы зафиксируем фон -->
  <div class="parallaxContent"><!-- Секция, разворот с кусочком содержимого -->
    <h1>Параллакс</h1>
    <p>Это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. В вебе принято называть параллаксом эффект, когда скорость прокрутки элементов отличается. Скажем, при прокрутке текста его фон стоит на месте или двигается с меньшей скоростью. Через раз­ную ско­рость про­крутки раз­ных эле­мен­тов пере­дают их рас­сто­я­ние от поль­зо­ва­теля, добав­ляя ощу­ще­ние объёма.</p>
  </div>

  <div class="parallaxContent"><!-- ... --></div>
  <div class="parallaxContent"><!-- ... --></div>
</div>
.parallax {
  background: url(endpaper.jpg) top center no-repeat; /* Задаём фон  */
  background-size: cover; /* Тянем фон так, чтобы он накрыл всю площадь содержимого */
  background-attachment: fixed; /* Фиксируем фон на месте */
}

.parallax::before,
.parallax::after {
  content: ''; /* Не даём маржинам вложенных элементов «протекать» наружу и отталкивать фон */
  display: table;
}

.parallaxContent {
  --margin: 20px; /* Задаём отступ между секциями содержимого */
  --padding: max(2.5vw, var(--margin)); /* Задаём поле так, чтобы оно было не меньше отступа между секциями */

  min-height: 100lvh; /* Пусть каждая секция занимает минимум один экран */
  max-width: calc(100% - 2 * var(--margin));
  padding: var(--padding) var(--padding) calc(2 * var(--padding));
  background: #fff;
  margin: var(--margin) auto;
}

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

.parallax::before {
  position: fixed; /* Включаем фиксированное позиционирование */
  z-index: -1;
  top: 0; /* Фиксируем элемент в ЛВУ видимой области окна браузера */
  left: 0;
  width: 100vw; /* Растягиваем элемент с фоном на всю доступную площадь экрана */
  height: 100lvh;
  background: url(https://bureau.ru/soviet/132768/files/endpaper.jpg) top center no-repeat;
  background-size: cover;
}

.parallax::before,
.parallax::after {
  content: '';
  display: table;
}

.parallaxContent {
  --margin: 20px;
  --padding: max(2.5vw, var(--margin));

  min-height: 100lvh;
  max-width: calc(100% - 2 * var(--margin));
  padding: var(--padding) var(--padding) calc(2 * var(--padding));
  background: #fff;
  margin: var(--margin) auto;
}

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы