Эффект параллакса html. Регулирование скорости слоя

В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.

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

Перенос параллакс эффекта в CSS спасает от проблем с производительностью и лишних манипуляций, позволяя браузеру самому всё регулировать за счёт аппаратного ускорения. В результате, почти все ресурсоёмкие процессы обрабатываются напрямую браузерным движком. Частота кадров (FPS) остаётся стабильной, а картинка становится плавной. Плюс, можно сразу комбинировать параллакс с другими 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 установит перспективу элемента в его центре, создав фиксированный 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) . Например, если перспектива вьюпорта задана как 1px и мы смещаем элемент на -2px по оси Z, то коэффицентом будет scale(3) .

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

Регулирование скорости слоя Скорость слоя регулируется комбинацией значений перспективы и смещения по 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); }
Взгляните на следующий пример и обратите внимание на галочку debug !

, Turtles in Time или оригинальную игру Moon Patrol . В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike - сайт о спортивных напитках Activate .

Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.

Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.

Первую вещь, которую вы заметите, это направление скроллинга страницы - оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.

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

Параллакс-скроллинг также может помочь оживить сайт, на котором не особо много контента. Что если весь ваш сайт состоит из mission statement, или раздела about us, плюс контактная информация? Скорее всего, вы бы могли сделать это одной страницей и при определенных условиях у вас бы получился неплохой одностраничный сайт, но запомнится ли он посетителям? Скорее всего, нет. Но что если добавить к нему немного параллакса, как это сделал народ на Spring / Summer ?

Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.

Параллакс-скроллинг - это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.

Примеры сайтов с параллаксом Некоторые из них очень крутые, рекомендую ознакомиться:

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

Каким бывает параллакс

Параллакс-скроллинг может использоваться вертикально, а также по прямой линии. В качестве примера больше всего подходит Nintendo. Многие из нас с ностальгией вспоминают компьютерные игры, представленные движением главных героев с левой части экрана направо. Также возможно перемещение вниз, осуществляемое по расположенной вертикально прямой. в сети часто используется. Для создания вертикального слайдера можно воспользоваться JavaScript или CSS 3.

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

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

Оживающая картинка

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

Примеры сайтов с движущимися изображениями:

• hvorostovsky.com;
• www.kagisointeractive.com.

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

Библиотека jQuery

Термином jQueryParallax определяют одноимённую библиотеку. Благодаря ей несложно добиться эффекта движения в формате 3D. В библиотеке jQuery трёхмерное восприятие создаётся различными способами. Один из них состоит в горизонтальном одновременном перемещении фоновых объектов с разной скоростью. Для этой библиотеки свойственно наличие большого количества разного рода свойств. И описанное здесь смещение представляет собой лишь небольшую часть её возможностей.

Достаточно привлекательно смотрится сайт, для создания которого были использованы различные современные элементы. Один из них - параллакс. Примеры сайтов могут выглядеть таким образом:

• www.grabandgo.pt;
• www.fishy.com.br;
• www.noleath.com;
• buysellwebsite.com.

jParallax представлен слоями, перемещающимися при движении мыши. Для динамичных элементов свойственно абсолютное ;). Каждый из них характеризуется собственным размером и движением с индивидуальной скоростью. Это может быть текст или изображение (по желанию создателей ресурса).

Восприятие посетителя сайта

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

Если оформление понравится, то посетитель останется на больший период. Таким образом, возрастает вероятность того, что его привлечёт размещённая информация, он проявит заинтересованность. В итоге человек воспользуется предлагаемой услугой, товаром или рекламным предложением.

Любимые старые игры

Понятие «параллакс» должно быть знакомо всем поклонникам приставок 80-90-х годов. Это касается игр:

Mario Bros.

Mortal Kombat.

Streets of Rage.

Moon Patrol.

Turtles in Time.

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

Изображения на экране созданы с использованием такой техники, как параллакс-скроллинг. Нет ничего удивительного в том, что указанная методика обрела заслуженную популярность. Этот дизайнерский концепт достаточно тепло воспринимается теми, кто играл в 80-90 годы или наблюдал за досугом друзей.

Параллакс-скроллинг

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

Параллакс-скроллинг довольно успешно был использован в компании Nike. Разработкой оригинального сайта компании занимались дизайнеры Weiden and Kennedy. Но этот дизайн не сохранился. Ресурс постепенно обновили, в соответствии с тенденциями современности. Activatedrinks.com - пример сайта, дизайн которого напоминает оформление, используемое маркетологами Nike указанного периода.

Динамики не должно быть много

Не стоит забывать, что оформление сайта часто выступает ключевым критерием, которым руководствуется посетитель. Некачественно выполненный ресурс обычно оставляет у пользователя впечатление несерьёзности компании-владельца. А вот сайт с разного рода привлекательными дизайнерскими элементами свидетельствует о стремлении владельцев организации заинтересовать посетителей.

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

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

Как создать перемещение на сайте

Как сделать параллакс? Этот вопрос интересует очень многих создателей сайтов. Необязательно знать тонкости написания тегов. Очень удобно использовать специальные ресурсы в интернете. Из большого числа имеющихся предложений можно выделить следующих помощников:

Plax - программа, являющаяся достаточно простой в использовании. Ей свойственно придавать странице подвижность благодаря перемещению мыши.

jQuery Parallax Image Slider - плагин jQuery используется, чтобы создавать слайдеры изображений.

Jquery Image Parallax - подходит для оформления прозрачных рисунков. Благодаря его использованию PNG, GIF приобретают глубину, оживляясь движением.

Curtain.js применяется для создания страницы, оснащённой фиксированными панелями. В этом случае наблюдается эффект открытия штор.

Scrolling Parallax: A jQuery Plugin состоит в создании эффекта параллакса при прокручивании колесика мышки.

Еще несколько полезных плагинов

Как известно, наибольшую ценность имеет информация. И чем большее количество способов достижения желаемого известно, тем ближе вероятность получения правильного результата. Полезные плагины, используемые для создания динамики:

jQuery Scroll Path - применяется для размещения объектов на указанном пути.

Scrollorama - jQuery-плагин. Он используется как инструмент для привлекательного оформления материала. Позволяет за счёт удобного прокручивания «оживить» имеющийся на странице текст.

Scrolldeck - jQuery-плагин. Представляет собой замечательное решение, используемое в качестве презентации для сайтов, оформленных в виде одной страницы.

jParallax представляет перемещение слоёв в зависимости от перемещения указателя мыши.

Stellar.js - плагин, с помощью которого любой элемент оформляется с добавлением эффекта параллакс-скроллинга.

Параллакс с привязкой к курсору

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

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

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

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

Разметка

Данная техника базируется на управлении скоростью перемещения фонового изображения. Создадим разметку HTML, содержащую две секции с атрибутами "data-type" и "data-speed" . Назначение атрибутов раскроется чуть позже:

Теги с атрибутами data-type и data-speed позволяют сделать разметку простой и понятной.

В соответствии со спецификацией любые атрибуты, начинающиеся на data- будут обрабатываться как хранилище частных данных. Дополнительно, они не оказывают влияния на шаблон.

Так как нам нужно управлять скоростью прокручивания фоновых изображений, то для ключевых параметров мы будем использовать data-type="background" и data-speed="10" .

Затем добавим тег в каждый тег .

Абсолютное позиционирование Простой эффект параллакса

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

CSS

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

#home { background: url(home.jpg) 50% 0 repeat fixed; min-height: 1000px; } #about { background: url(about.jpg) 50% 0 no-repeat min-height: 1000px; }

И определим стили для остальных элементов нашей демонстрационной страницы.

#home { background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; } #home article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; } #about { background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box-shadow: 0 0 50px rgba(0,0,0,0.8); } #about article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; }

Магический код

Используем jQuery. Начнем со стандартного метода document.ready() , чтобы быть в уверенности о загрузке страницы и ее готовности к манипуляциям.

$(document).ready(function(){ });

Теперь нужно внимание. Первое, что здесь происходит - итерация по всем элементам с атрибутом data-type="background" на странице.

$(document).ready(function(){ $("section").each(function(){ var $bgobj = $(this); // Назначаем объект }); });

В функцию.each() добавим другую функцию.scroll() , которая вызывается в момент начала прокрутки.

$(window).scroll(function () {

Нужно определить на сколько пользователь прокрутил страницу, и затем разделить полученное значение на величину, определяемую в атрибуте data-speed .

Var yPos = -($window.scrollTop() / $bgobj.data("speed"));

$window.scrollTop() - получаем текущее значение прокрутки сверху. $bgobj.data("speed") ссылается на атрибут data-speed в разметке. yPos - окончательное значение, которое используется для прокрутки. Однако, используется отрицательное значение, так как фон смещается в обратном направлении по отношению к прокрутке пользователя.

В нашем примере атрибут data-speed имеет значение 10. Предположим, что окно браузера прокручивается на 57px . Это означает, что 57px делится на 10 = 5.7px .

// Собираем положение фона var coords = "50% "+ yPos + "px"; // Смещаем фон $bgobj.css({ backgroundPosition: coords });

Теперь надо собрать все данные в одно значение. Чтобы сохранить горизонтальное положение фона статичным, мы используем значение 50% для его свойства xPosition . Затем добавляем yPos в качестве значения свойства yPosition , а затем присваиваем координаты фону : $bgobj.css({ backgroundPosition: coords }); .

В окончательном виде код будет выглядеть так:

$(document).ready(function(){ $("section").each(function(){ var $bgobj = $(this); // Назначаем объект $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data("speed")); // Собираем значение координат фона вместе var coords = "50% "+ yPos + "px"; // Смещаем фон $bgobj.css({ backgroundPosition: coords }); }); }); });

Фиксатор для IE

Остается один момент: старые версии IE не могут вывести теги и . Дело легко поправить, мы будем использовать стандартное решение для создания элементов, которое магическим образом заставит браузер распознавать теги HTML5.

// Создаем элементы для IE document.createElement("article"); document.createElement("section");

Дополнительно мы используем файл сброса CSS , чтобы все браузеры выводили страницу одинаково.

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

Но есть проблема - сделать параллакс без тормозов и дерганий может стать сложной задачей для начинающего (и не очень) веб-мастера.

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

Для начала давайте отметим несколько важных пунктов:

• Не используйте события scroll либо background-position для создания параллакс анимации.
• Используйте CSS 3D трансформации для создания более точного эффекта параллакса.
• Для мобильного браузера Safari используйте position: sticky чтобы эффект параллакса гарантированно размножился.

Вы можете зайти в репозиторий Github – примеры UI элементов и вытащить от туда Parallax helper JS ! Вы можете посмотреть живое демо параллакс скролла в репозитории Github.

Проблемы параллакс эффекта

Для начала давайте рассмотрим 2 основных пути для достижения параллакс эффекта, и в частности почему они не подходят для наших целей.

Плохо: использование событий scroll

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

Во многих браузерах события прокрутки предоставляются низкого качества и нет гарантии доставки их к каждому кадру анимации прокрутки!

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

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

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

Плохо: обновление background-position

Другая ситуация, которую мы должны избежать это отрисовка каждого кадра. Многие решения пытаются изменить background-position обеспечить вид параллакса, что приводит к перерисовке испорченных частей страницы при прокрутке и это может привести к ненужной анимации.

Если мы хотим выполнить обещанное параллакс перемещение, нам необходимо что-то такое, что может быть применено в качестве ускорителя (что на сегодняшний день означает придерживаться transforms и opacity), и которое не полагается на события scroll.

3D в CSS

Scott Kellum и Keith Clark провели значительную работу в области использования CSS 3D для достижения параллакс перемещения. Они эффективно используют следующий технический прием:

• Установить scroll для содержимого элемента с overflow-y: scroll (и вероятно overflow-x: hidden).
• К тому же элементу добавить значение perspective , и для perspective-origin установить top left или 0 0 .
• Потомкам того элемента применить сдвиг по оси Z, и масштабировать резервную копию таким образом, чтобы параллакс движение не затрагивало их размер на экране.

CSS для такого подхода выглядит так:

css Настройка масштаба для perspective

Сдвиг дочернего элемента назад может стать причиной уменьшения пропорционально значению perspective. Вы можете рассчитать до какого значения масштабировать с помощью следующего уравнения: (perspective - distance) / perspective . Так как мы скорее всего хотим сместить элемент, но при появлении его в том размере, в котором мы ему указали, его необходимо масштабировать таким образом, чтобы не сдвинуть его в лево.

В нашем случае в коде выше perspective равен 1 px, Z дистанция parallax-child равна -2px. Это означает, что элемент нужно 3х кратно увеличить, в коде вы можете наблюдать это как следующую запись scale(3).

Для любого контента, у которого не будет задана величина translateZ Вы можете заменить ее на 0. Это значит масштаб будет (perspective - 0) / perspective, что даются сетку из 1 значения, что значит невозможность ни увеличить ни уменьшить масштаб. Реально удобно.

Как работает данный подход

Важно чтобы было ясно почему это работает, поскольку мы будем использовать эти знания в ближайшее время. Скроллинг это фактически transform, именно поэтому он может быть ускорен; это в основном включается себя смещение слоев вокруг с помощью GPU. В типичной прокрутке, которая не имеет представление о perspective, прокрутка происходит в соотношении 1 к 1 когда сравнивают прикручиваемые элементы и их потомки. Если прокрутить элементы на 300 px вниз, то предки трансформируются на верх на те же 300 px.

Однако применение значения perspective к прокручиваемым элементам вносит путаницу с этим процессом; это меняет матрицу, которая лежит в основе преобразование скролла. Сейчас прокрутка на 300px может сдвинуть потомка на 150px, в зависимости от того какие Вы выбрали значения perspective и translateZ. Если какой-то элемент имеет значение translateZ равным 0 он будет прокручиваться в масштабе 1 к 1(как раньше), но потомок оттолкнутый по оси Z от начального perspective будет скролится с другой скоростью. Чистый результат: параллакс перемещение. И что немало важно, это регулировка происходит внутренним механизмом браузеров автоматически, что значит отсутствие необходимости прислушиваться к событиям scroll или менять background-position.

Ложка дегтя в бочке меда: мобильный Safari

Есть много предостережений к каждому эффекту, и один из важным для transforms это сохранение 3D эффектов для потомков. Если есть элементы в иерархии, между элементом и его параллакс потомком, 3D perspective имеет значение “flattened”, что означает эффект потерян.

html

Однако в случае мобильного Safari все немного запутаннее. Применение overflow-y: scroll к элементу контейнера технически работает, но за счёт швыряния прокручиваемых элементов. Решением будет добавить -webkit-overflow-scrolling: touch , но он также сгладит perspective и мы не получим никакого параллакса.

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

В помощь position: sticky!

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

Блок с позиционированием stick позиционируется аналогично блоку с позиционированием relative, но смещение вычисляется с ссылкой на ближайшего предка с ползунком прокрутки или viewport если нет предка с ползунком прокрутки. - CSS Positioned Layout Module Level 3.

Это может показаться не таким уж значимым на первый взгляд, но ключевой момент в том выражении в том, как вычисляется параметр элемента stick: “смещение вычисляется с ссылкой на ближайшего предка с ползунком прокрутки”. Другими словами, расстояние движения элементов со значением stick (для того чтобы казаться прикрепленным к другому элементу или к видимой части экрана) высчитывается до применения каких-либо других трансформаций, а не после. Это значит, очень похоже на пример приведенный ранее, если смещение было рассчитано на 300px, это новая возможность использования значений perspective (или иного transform) для того чтобы влиять на значение перемещения на 300px до того как оно будет применено к любому элементу со значением stick.

Применяя position: -webkit-sticky для элемента с параллаксом мы можем фактически получить “обратное” эффекту от -webkit-overflow-scrolling: touch. Это гарантирует, что элемент с параллаксом ссылается на ближайшего предка с ползунком прокрутки, в данном случае это.container . Далее также как и до этого добавляем значение perspective к.parallax-container, которое изменяет рассчитанное перемещение скролла и создает эффект параллакса.

html css

Container { overflow-y : scroll; Webkit-overflow-scrolling : touch; Parallax-container { perspective : 1px ; Parallax-child { position : -webkit-sticky; top : 0px ; transform : translate (-2px) scale (3);

Это восстанавливает эффект параллакса для мобильного Safari, что является отличной новостью для всех!

Предостережения для позиционирования sticky

Тем не менее тут есть различие: position: sticky изменяет механизм параллакса. Позиционирование sticky пытается, полностью, приклеить элемент к прокручиваемому контейнеру, в то время как версия без sticky этого не делает.

• С position: sticky , чем ближе элемент к z = 0 тем меньше он двигается.
• Без position: sticky , чем ближе элемент к z = 0 тем больше он двигается.

Если все это кажется немного абстрактным, Посмотрите демо от Роберта Флака, которое демонстрирует разницу в поведении элементов с позиционированием sticky и без. Чтобы видеть разницу Вам нужен Chrome Canary (версия 58 на момент написания статьи) или Safari.

Демо Роберта Флака показывает как position: sticky влияет на параллакс прокручивание.

Разные ошибки и способы их устранения

Как всегда есть бугорки и неровности, которые нужно сгладить:

• Поддержка sticky противоречива. Поддержка реализована в Chrome, Edge не поддерживает полностью, а FireFox имеет баги отрисовки при совместном использовании sticky и transforms: perspective. В таких случаях стоит добавить небольшой код только лишь для того чтобы подключить position: sticky (с префиксом -webkit-) когда это необходимо, это нужно только для мобильного Safari.
• Данный эффект совсем не работает в Edge . Edge пытается обработать прокручивание на уровне ОС, что в общем хорошая вещь, но в данном случае это препятствует обнаружения перспективных изменений во время прокрутки. Чтобы исправить это Вы можете добавить элемент с позиционированием fixed, как это выглядит в переходе Edge к методу обработки без ОС, что гарантирует учет перспективных изменений.
• Контент страницы просто огромен! Многие браузеры не берут в расчет масштаб при решении на сколько большой контент страницы, но к сожалению Chrome и Safari не учитывают перспективы. Поэтому если скажем применить масштаб 3Х к элементу, мы можем увидеть полосы прокрутки и тому подобное, даже при масштабе 1Х после применения perspective. Есть возможность обойти эту проблему масштабируя элементы относительно правого нижнего угла (transform-origin: bottom right). Это работает благодаря тому, что негабаритные элементы перерастут в “отрицательные области” (обычно с права с верху) относительно прокуриваемой области; Прокручиваемые области никогда не покажут либо не прокрутят контент до отрицательной области.

Заключение

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

Оригинал: https://developers.google.com/web/updates/2016/12/performant-parallaxing