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