Параллакс — это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. В вебе параллаксом называют эффект, когда скорость прокрутки элементов отличается. Скажем, при прокрутке текста его фон стоит на месте или двигается с меньшей скоростью.
Параллакс пришёл в веб из старых видеоигр. В них фоновые изображения перемещаются медленнее, чем изображения на переднем плане, чтобы создать иллюзию глубины двухмерной сцены, псевдо‑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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.