[Перевод] «Hero Image» — баннеры в параллаксе
С CSS 3D Transforms у вас есть безграничные возможности. Но могущество влечет за собой ответственность. Вы будете сталкиваться с ситуациями, когда вы сможете воспользоваться всеми трехмерными преимуществами CSS. Однако в большинстве проектов вы сможете лишь слегка приукрасить некоторые вещи.Сегодняшнее сокровище — это эффект, который завоевывает все большую популярность и создается за счет 3D Transforms. Благодаря этому мы поместили несколько изображений на ось z, после чего использовали мышь в качестве ложной трехмерной камеры, таким образом, чтобы перспектива изменялась при передвижении курсора мыши. На самом деле в этом случае мы поворачиваем изображение в трехмерном пространстве в соответствии с положением мыши.
ДемоТак как этот эффект зависит от движения мыши, на мобильных устройствах он будет незаметен.
Этот замечательный эффект можно посмотреть на таких сайтах, как Squarespace и HelloMonday.
Создание структурыМы используем элемент figure, который содержит наш баннер (hero image) (здесь мы использовали 3 разных) и обернут в элемент .cd-background-wrapper.
Добавление стиля Чтобы создать hero image, мы накладываем элементы поверх друг друга: первый имеет статичное положение, а остальные находятся в абсолютном положении; каждому из них присваивается отдельное значение translateZ.В чем заключается идея параллакс-эффекта: когда пользователь двигает мышкой на «hero image» баннере, элемент .cd-floating-background вращается (вдоль осей X и Y), в зависимости от положения мыши. Так как элементы имеют разные значения translateZ, каждый из них вращается по-разному.
Чтобы в полной мере добиться этого эффекта, нам необходимо убедиться, что наши -элементы правильно расположены в трехмерном пространстве: сначала мы указываем значение перспективы для .cd-background-wrapper, который создает трехмерное пространство, в котором располагаются его дочерние элементы; потом мы назначаем transform-style: preserve-3d для .cd-floating-background таким образом, чтобы эти дочерние элементы размещались в трехмерном пространстве, а не в плоском (как установлено по умолчанию). Остальное делает TranslateZ!
.cd-background-wrapper { overflow: hidden; perspective: 4000 px; } .cd-floating-background { transform-style: preserve-3d; } .cd-floating-background img: first-child { transform: translateZ (50 px); } .cd-floating-background img: nth-child (2) { transform: translateZ (290 px); } .cd-floating-background img: nth-child (3) { transform: translateZ (400 px); } Об IE: IE9 не поддерживает CSS3 3D Transforms, а IE10+ не поддерживает свойство «transform-style: preserve-3d». Поэтому в браузере IE эффект параллакса не будет виден, и вы увидите стандартное изображение.
Обработка событий Мы привязываем функцию initBackground () к событию загрузки изображения: эта функция изменяет значение свойства положения элемента с относительного на абсолютное (используется класс «is-absolute»). В этом случае нам нужно указать правильную высоту элемента .cd-background-wrapper (так как его дочерний элемент находится в абсолютном положении, его высота по умолчанию равна 0) и правильные размеры .cd-floating-background (он должен быть больше, чем оболочка — тогда при вращении не обнаружатся пустые границы).Мы оцениваем соотношение сторон и ширину обзора изображения и назначаем для .cd-background-wrapper высоту, равную значениям viewportWidth/heroAspectRatio. Высота и ширина .cd-floating-background должны быть пропорциональны .cd-background-wrapper, а параметры левой и верхней стороны должны быть установлены таким образом, чтобы изображение располагалось по центру внутри родительского элемента.
После этого мы привязываем событие mousemove к .cd-background-wrapper: положение мыши оценивается с помощью event.pageX и event.pageY, после чего элементу .cd-floating-background назначается соответствующее значение rotateX и rotateY.
Примечание: Modernizr пока не определяет «preserve-3d». Поэтому, чтобы создать этот эффект для тех браузеров, которые его не определяют, мы использовали функцию getPerspective, которая назначает для класс «preserve-3d/no-preserve-3d» в соответствии с поддержкой браузера.
