Паралакс-скроллинг веб-сайта на чистом CSS

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

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

Все это происходит не синхронно с рендерингом, вызывает выпадение кадров и «заикание» прокрутки. Лучшее решение для использования паралакс — эффекта — requestAnimationFrame, который полностью изменяет принцип работы – но как нам полностью избавиться от использования JavaScript?

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

Вы также можете комбинировать эффект с другими функциями CSS, такими как media queries или supports – кому респонсивный паралакс?

Демо-режим

Теория

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

<div class="parallax">   <div class="parallax__group">     <div class="parallax__layer parallax__layer--back">       ...     </div>     <div class="parallax__layer parallax__layer--base">       ...     </div>   </div>   <div class="parallax__group">     ...   </div> </div>

И некоторые базовые детали стиля:

.parallax {   perspective: 1px;   height: 100vh;   overflow-x: hidden;   overflow-y: auto; } .parallax__layer {   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0; } .parallax__layer--base {   transform: translateZ(0); } .parallax__layer--back {   transform: translateZ(-1px); }

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

Свойство overflow-y: auto позволит скролить контент в обычном режиме, но теперь элементы-потомки будут отображаться относительно фиксированной перспективы. Это ключ к созданию паралакс-эффекта.

Далее класс parallax__layer. Как предполагает имя, он определяет слой содержимого, к которому будет применен эффект. Элемент извлекается из потока контента и настраивается для заполнения пространства контейнера.

И, наконец, у нас есть классы модификаторов — parallax__layer—base и parallax__layer—back. Они используются для определения скорости прокрутки элемента параллакса, переводя его вдоль оси Z (перемещение дальше или ближе относительно области просмотра).

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

Демо-режим

Коррекция глубины

Так как эффект параллакса создан при помощи 3D-преобразования, перемещение элемента вдоль оси Z имеет побочный эффект — его размеры меняются в зависимости от того, как мы передвигаем его ближе или дальше от области просмотра.

Чтобы избежать этого, мы применим трансформацию элемента с помощью метода scale(), чтобы он отображался в оригинальном размере:

.parallax__layer--back {   transform: translateZ(-1px) scale(2); }

Коэффициент масштабирования может быть рассчитан с помощью формулы 1 + (translateZ * -1) / perspective). Для примера, если perspective области просмотра равен 1px и мы перемещаем элемент на — 2px вдоль оси Z коэффициент масштабирования будет равен scale(3):

.parallax__layer--deep {   transform: translateZ(-2px) scale(3); }

Демо-режим с коррекцией глубины

Управление скоростью слоя

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

Элементы с отрицательными значениями по оси Z будут прокручиваться медленнее, чем элементы, которые имеют положительные значения. Чем дальше значение находится от 0, тем более выражен паралакс — эффект (например translateZ(-10px) будет скролится медленнее, чем translateZ(-1px)).

Создание различных разделов страницы параллакса

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

Во-первых, нам нужен элемент parallax__group, чтобы сгруппировать элементы в группы:

<div class="parallax">   <div class="parallax__group">     <div class="parallax__layer parallax__layer--back">       ...     </div>     <div class="parallax__layer parallax__layer--base">       ...     </div>   </div>   <div class="parallax__group">     ...   </div> </div>

Вот код CSS для элемента группы:

.parallax__group {   position: relative;   height: 100vh;   transform-style: preserve-3d; }

В этом примере, я хочу, чтобы каждая группа заполняла область просмотра. Устанавливаем значение height: 100vh. Однако при необходимости произвольные значения могут быть установлены для каждой группы.

Свойство transform-style: preserve-3d предотвращает сплющивание браузером, а элементы parallax__layer и position: relative используются, чтобы потомки элемента parallax__layer позиционировались относительно элементов группы.

Одно важное правило, которым стоит руководствоваться при группировке элементов — мы не можем обрезать содержимое группы. Установка overflow: hidden для parallax__group будет блокировать эффект.

Необрезанное содержимое приведет к ошибке переполнения элементов-потомков, потому нам нужно позаботиться о значениях z-index для группы, чтобы обеспечить правильное отображение/скрытие контента при прокрутке документа.

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

.parallax__group {     transform: translate3d(700px, 0, -800px) rotateY(30deg); }

Посмотрите на следующий пример и обратите внимание на опцию отладки!

Демо-режим

Поддержка браузерами

  • Firefox, Safari, Opera и Chrome поддерживают этот эффект;
  • В Firefox все работает, но в настоящее время существует незначительная проблема с выравниванием;
  • Internet Explorer еще не поддерживает preserve-3d (появление поддержки вскоре ожидается), потому паралакс — эффект не поддерживается. Для этого браузера вам придется создать контент без данного эффекта. Но, прогресс не стоит на месте! Дерзайте!

Перевод статьи «Pure CSS parallax scrolling websites» был подготовлен дружной командой проекта Сайтостроение от А до Я.