«Hero Image» — баннеры в параллаксе

С CSS 3D Transforms у вас есть безграничные возможности. Но могущество влечет за собой ответственность. Вы будете сталкиваться с ситуациями, когда вы сможете воспользоваться всеми трехмерными преимуществами CSS. Однако в большинстве проектов вы сможете лишь слегка приукрасить некоторые вещи.

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

Демо

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

Этот замечательный эффект можно посмотреть на таких сайтах, как Squarespace и HelloMonday.

Создание структуры

Мы используем элемент figure, который содержит наш баннер (hero image) (здесь мы использовали 3 разных ) и обернут в элемент .cd-background-wrapper.

<div class="cd-background-wrapper">
	<figure class="cd-floating-background">
		<img src="img/cd-img-1.jpg" alt="image-1">
		<!-- images here -->
	</figure>
</div>

Размеры используемых изображений должны быть одинаковыми.

Добавление стиля

Чтобы создать 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: 4000px;
}
 
.cd-floating-background {
  transform-style: preserve-3d;
}
 
.cd-floating-background img:first-child {
  transform: translateZ(50px);
}
 
.cd-floating-background img:nth-child(2) {
  transform: translateZ(290px);
}
 
.cd-floating-background img:nth-child(3) {
  transform: translateZ(400px);
}

Об 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» в соответствии с поддержкой браузера.