Простая техника эффекта параллакса. Плохо: использование событий scroll. В помощь position: sticky

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

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

Шаг 1 – HTML Section 1 Simple title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus id nunc ut gravida. Vestibulum ac...

Section 2 Simple title 2

Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam egestas a elit at malesuada...

Section 3 Simple title 3

Proin tempor urna vitae tortor porttitor, ac malesuada elit lacinia. Nulla ac tellus nulla. Donec iaculis...

Как вы видите, HTML разметка не сложная, она включает в себя 6 альтернативных разделов: три из них содержат фоновые изображения (разделы с классом parallax), три содержат текст (секции с классом content).

Шаг 2 – Изображения

Все фоновые изображения имеют фиксированный размер 1600 × 600 пикселей. Это позволит нам использовать изображения на большинстве разрешений экрана (респонсивный макет(responsive layout)). Все наши блоки параллакса имеют одинаковую фиксированную высоту (600px).

Шаг 3 – CSS

Теперь нам нужно расширить изображения, чтобы заполнить всё доступное пространство, для этого мы поставили значение background-size: cover , а затем мы устанавливаем background-attachment: fixed , чтобы зафиксировать фон.

Container { max-width: 960px; margin: 0 auto; } section.section:last-child { margin-bottom: 0; } section.section h2 { margin-bottom: 40px; font-family: "Roboto Slab", serif; font-size: 30px; } section.section p { margin-bottom: 40px; font-size: 16px; font-weight: 300; } section.section p:last-child { margin-bottom: 0; } section.section.content { padding: 40px 0; } section.section.parallax { height: 600px; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } section.section.parallax h1 { color: rgba(255, 255, 255, 0.8); font-size: 48px; line-height: 600px; font-weight: 700; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } section.section.parallax-1 { background-image: url("../imgages/1.jpg"); } section.section.parallax-2 { background-image: url("../imgages/2.jpg"); } section.section.parallax-3 { background-image: url("../imgages/3.jpg"); } @media all and (min-width: 600px) { section.section h2 { font-size: 42px; } section.section p { font-size: 20px; } section.section.parallax h1 { font-size: 96px; } } @media all and (min-width: 960px) { section.section.parallax h1 { font-size: 160px; } }

15531

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

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

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

Демо Теория

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

... ...

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

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 для этого класса, тем самым создали эффект глубины. Свойство overflow-y: auto позволяет скроллить контент внутри элемента обычным способом, но теперь вложенные элементы будут отрисовываться относительно фиксированной перспективы. В этом ключевой момент в создании эффекта параллакса.

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

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

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

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

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

Parallax__layer--deep { transform: translateZ(-2px) scale(3); } Демо

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

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

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

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

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

... ... ...

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

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

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

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

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

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

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

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

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

Всем привет. Сегодня расскажу вам о небольшом скрипте для создания простого parallax эффекта.

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

Что такое параллакс эффект на сайте

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

Как сделать параллакс эффект на сайте

Итак, первым делом подключаем библиотеку jquery. Как обычно, между тегами head:

Теперь, нужно скачать подключить скрипт Simple Parallax Scrolling . Я рекомендую использовать сразу сжатую версию, так как дополнительных настроек внутри скрипта делать не понадобится:

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

Smartlanding Создание landing page

Data-parallax="scroll"

Data-image-src="путь к картинке/bg.png"

Обратите внимание, что картинка не кладется в шапку при помощи тега img, а задается непосредственно в атрибутом в том контейнере, в котором хотим реализовать parallax.

На этом, в принципе, можно заканчивать, но еще пару слов:

Если в dive, в котором хотим реализовать параллакс эффект нет других элементов, то необходимо задать ему высоту, иначе ничего не увидите.
В случае использования не адаптивного дизайна, можно задать ширину и высоту изображения прямо в html при помощи атрибутов naturalWidth и naturalHeight.
Можно двигать изображения при помощи атрибута data-position. Это аналог background-position в css.

С остальными опциями можете ознакомиться на официальной страничке проекта, которая указана выше.

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

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

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

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

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

Демо-режим Теория

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

... ... ...

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

Класс 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 , чтобы сгруппировать элементы в группы:

... ... ...

Вот код 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 » был подготовлен дружной командой проекта