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

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

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

Теория

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

И добавим стили:

Класс parallax — это то место, где будет происходить магия. Мы определили свойства height и perspective для этого класса, тем самым создали эффект глубины. Свойство overflow-y: auto позволяет скроллить контент внутри элемента обычным способом, но теперь вложенные элементы будут отрисовываться относительно фиксированной перспективы. В этом ключевой момент в создании эффекта параллакса.

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

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

Для простоты, я добавил только два слоя с разными скоростями — мы добавим больше далее.

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

Поскольку параллакс создается с помощью 3D-преобразований, перемещение элемента вдоль оси Z имеет побочный эффект — при перемещении элемента ближе или дальше меняется его размер. Чтобы исправить это, мы должны применить трансформацию scale() к элементу, тогда он будет отрисовываться в оригинальном размере:

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

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

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

Подразделы с параллаксом

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

Для начала нам необходим элемент parallax__group, в котором мы сгруппируем слои:

CSS стили для этого элемента:

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

При группировке элементов необходимо помнить одно важное правило, мы не можем обрезать содержимое группы. Установка overflow: hidden для элемента parallax__group сломает эффект параллакса. Это приводит к тому, что дочерние элементы могут выходить за границы контейнера, поэтому здесь нужно правильно расставить значения z-index у групп, чтобы содержимое правильно показывалось/скрывалось при прокрутке страницы.

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

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

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

• Firefox, Safari, Opera и Chrome поддерживают этот эффект.
• В Firefox есть небольшая проблема с выравниванием.
• IE пока не поддерживает свойство preserve-3d, поэтому эффект параллакса работать не будет. Это нормально, но вы все равно должны убедиться, что содержимое корректно отображается без параллакса — ну вы знаете, прогрессивное улучшение и все такое!

Параллакс эффект. Плагин Simple Parallax Scrolling.

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

Благодаря популярности параллакс эффекта, уже существуют готовые плагины с реализацией простой parallax анимации на сайте. Наша задача состоит в том, чтобы эффективно воспользоваться готовыми решениями и уметь применять их на своих сайтах.

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

Что необходимо для реализации параллакс-скроллинг эффекта?

1. Подключаем к нашему HTML-документу библиотеку jQuery и скачанный с сайта плагин – parallax.js.
2. Выводим параллакс эффект на страницу с помощью атрибута – data. Добавьте в элемент HTML-файла, который хотите использовать — data-parallax=»scroll» и укажите путь к фотографии — data-image-src=»https://steptosleep.ru/wp-content/uploads/2018/06/15853.jpg», к которой хотите применить эффект.
3. Скопируем набор стилей и добавим в наш файл style.css.
4. Самое главное – это подобрать большого размера и качественные фотографии. Если у меня нет нужных фотографий, то я смело беру их с pixabay. Они бесплатны и их можно свободно использовать в коммерческих целях.

Перед заливкой на сервер у вас должна быть папка с фотографиями, папка со скачанными скриптами (jquery.min.js и parallax.js), а так же HTML файл и CSS стили.

Полный HTML-код:

style.css:

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

Эффект параллакса заключается в особенностях человеческого зрения.

Когда человек совершает движение в пространстве, при этом наблюдая за предметом, ему кажется, что эти предмет тоже движется. Если человек сменил точку зрения относительно объекта на каком-то фоне, этот фон меняется, и глазу кажется, что передвинулся объект, хотя это не так.

Эффект параллакса очень важен для фотографа, поскольку, по мере того как фотограф меняет ракурс, меняется его положение относительно объекта съемки, а положение объекта съемки меняется относительно фона. Таким образом, начинающему фотографу необходимо пользоваться эффектом параллакса, чтобы выбрать наиболее подходящий угол съемки.

Термин «эффект параллакса» также применим к видоискателю незеркальной камеры. Видоискатель такой камеры видит сцену и объект съемки иначе, чем объектив, который находится в нескольких сантиметрах от него. Таким образом, границы кадра не совпадают с тем, что видел фотограф через объектив, а значит, глядя в видоискатель такой камеры, владелец должен учитывать, что границы получившейся фотографии будут несколько другими.