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

Не будем перечислять множество вариантов создания эффекта параллакса на JavaScript. В этой статье мы рассмотрим простое и эффективное решение данной задачи только на CSS. Для этого нам потребуется около 35 строк кода.

Итак, приступим:

HTML

HTML-код предельно простой:

<main class="wrapper">
  <section class="parallax bg1">
    <h1>Заголовок 1</h1>
  </section>
  <section class="static">
    <h1>Заголовок 2</h1>
  </section>
  <section class="parallax bg2">
    <h1>Заголовок 3</h1>
  </section>
</main>

Разберем назначение некоторых блоков и их классов:

1. .wrapper - устанавливает правила прокрутки и эффект перспективы для всего документа,
2. section - устанавливает размеры блоков, положение дочерних элементов, свойства вложенного текста. Не содержит параметров обязательных для реализации параллакса,
3. .static - блок нужен только для демонстрации результата, определяет фон элемента,
4. .parallax - добавляет псевдо-элемент ::after с фоновыми картинками и параметрами свойства transform, определяющими появление параллакса,
5. .bg1, .bg2 - содержат соответствующие фоновые изображения.

CSS

:root {
  font-family: sans-serif;
}

.wrapper {
  height: 100vh; /* Высота должна быть фиксированной, 100vh занимает всю высоту видимой области экрана */
  overflow-x: hidden;
  overflow-y: auto; /* Прокрутка по вертикали */
  perspective: 2px; /* Симулируем пространство между экраном и трансформируемым объектом, в данном случае - 2px */
}

section {
  position: relative; /* Нужно для позиционирования дочерних элементов */
  height: 100vh; /* Высота элемента */
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 5px #000;
  color: #fff;
}

.parallax::after {
  /* Создаем и позиционируем псевдо-элемент */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateZ(-1px) scale(1.5); /* Отодвигаем псевдо-элемент от экрана и масштабируем, чтобы заполнить пустое пространство, так как этот элемент находится дальше, он будет двигаться медленее, симулируя повеедение реального отдаленно расположенного объекта */
  background-size: 100%;
  z-index: -1; /* Упреждаем перекрытие дочерними элементами */
}

/* Фон для статичного объекта */
.static {
  background-color: #555;
}

/* Фоновые картинки для отдаленных объектов */
.bg1::after {
  background-image: url('https://source.unsplash.com/jFCViYFYcus/1600x900');
  background-position: center top;
}

.bg2::after {
  background-image: url('https://source.unsplash.com/1Z2niiBPg5A/1600x900');
  background-position: center bottom;
}

Пример можно посмотреть на codepen.

Спасибо за внимание.