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

2014-08-21 0 ∞

В этой статье мы расскажем о том, как использовать 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 (появление поддержки вскоре ожидается), потому паралакс - эффект не поддерживается. Для этого браузера вам придется создать контент без данного эффекта. Но, прогресс не стоит на месте! Дерзайте!