Как создать заголовок страницы с параллакс эффектом 3D вращения

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

Давайте для начала посмотрим на то, что мы хотим получить в итоге нашей работы.

Как видите, когда курсор попадает в область контейнера, содержащего заголовок страницы, последний начинает поворачиваться относительно вертикальной и горизонтальной осей, как бы «отслеживая» движение мыши (чем больше расстояние курсора от центра блока, тем больше угол поворота). Кроме того, текст заголовка как бы приподнимается над подложкой, тем самым создавая дополнительный 3D эффект.

Итак, давайте перейдем к тому, как сверстать подобный заголовок.

Шаг 1. Верстка HTML макета

Давайте для начала заверстаем HTML макет:

Заголовок страницы с эффектом 3D вращения

<section class="page-header__section">
   <div class="page-header__wrap">
        <div class="page-header__body">
            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Продолжил диких себя проектах приставка семантика, сих живет толку маленькая!
        </div>
   </div>
</section>

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

Рассмотрим назначение каждого из этих слоев:

• Самый верхний слой с классом .page-header__section представляет собой контейнер, внутри которого будет отслеживаться движение курсора.
• Следующий слой .page-header__wrap – это контейнер, который мы и будем поворачивать относительной осей X и Y в зависимости от движения мыши.
• И наконец слой .page-header__body мы будем «приподнимать» относительно родительского слоя .page-header__wrap за счет перемещения вдоль оси Z.

Шаг 2. CSS стилизация объектов и создание анимации

Теперь давайте немного стилизуем наши блоки и подготовим CSS-правила для дальнейшей анимации.

Давайте зададим основные стили:

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        :root {
            --index: calc(1vw + 1vh);
        }
 
        body {
            background-color: rgb(211, 211, 211);
            color: rgb(53, 53, 53);
            font-family: Arial, Helvetica, sans-serif;
            font-size: calc(var(--index) * 0.8);
        }
 
        h1 {
            font-size: 2.5em;
            margin-bottom: 15px;
        }
 
        .page-header__section {
            background-color: rgb(53, 53, 53);
            padding: 150px 0;
        }
 
        .page-header__wrap {
            width: 45%;
            margin: 0 auto;
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.3);
            border: double 5px #fff;
            color: #fff;
            text-align: center;
        }

Думаю, тут все понятно. Единственное поясню, что означает переменная —index: calc(1vw + 1vh) – это некая производная от ширины (vw) и высоты (vh) окна браузера, которую мы будем использовать при задании размера шрифта, чтобы сделать его максимально адаптивным. Этот прием я «подсмотрел» у авторов Youtube-канала WebDesign Master, за что им БОЛЬШОЕ спасибо!!!

Теперь давайте стилизовать анимацию.

Для начала, напишем правила, которые будут перемещать блок .page-header__body по оси Z в тот момент, когда курсор находится над блоком .page-header__section и возвращать его в исходное состояние, когда курсор выходит за пределы секции.

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

Итак, в наш CSS файле мы добавляем следующий код:

        :root {
            --trans_option: transform 2.75s cubic-bezier(.075, .5, 0, 1), text-shadow 2.75s cubic-bezier(.075, .5, 0, 1);
            --perspective: 40px;
            --heightZ: 3.5px;
        }
 
        .page-header__section {
            perspective: var(--perspective)
        }
 
        .page-header__wrap {
            transition: var(--trans_option);
            transform-style: preserve-3d;
        }
 
        .page-header__section .page-header__wrap .page-header__body {
            transition: var(--trans_option);
        }
 
        .page-header__section:hover .page-header__wrap .page-header__body {
            transform: translateZ(var(--heightZ));
            transition: var(--trans_option);
            text-shadow: calc(var(--heightZ)) calc(var(--heightZ)) calc(var(--heightZ) * 2) rgba(0, 0, 0, .3);
        }

Для того, чтобы заработало перемещение по оси Z блока .page-header__body нам понадобилось его родительскому блоку (.page-header__wrap) задать свойство transform-style: preserve-3d.

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

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

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

Теперь давайте напишем правила для 3D поворота блока. Добавляем следующий CSS-код:

        :root {
            --max_angle_x: .7deg;
            --max_angle_y: .5deg;
        }
 
        .page-header__section:hover .page-header__wrap {
            transform: rotateX(calc(var(--mouseY) * var(--max_angle_x))) rotateY(calc(var(--mouseX) * var(--max_angle_y)));
            transition: var(--trans_option);
        }

Как видите, мы добавили еще 2 переменные —max_angle_x и —max_angle_y, которые задают максимальный угол поворота относительно оси X и Y соответственно. А так же указали свойство transform: rotateX и rotateY для блока .page-header__section:hover .page-header__wrap

Однако, если вы добавите указанный выше код в свой проект и попробуете протестировать результат, то ничего не произойдет…

Так получилось потому, что при вычислении значений свойств rotateX и rotate задействованы еще 2 переменные —mouseY и —mouseX, которые мы пока нигде не определили.

Что же это за переменные и где их взять?

—mouseY и -–mouseX – это коэффициент удаления курсора от центра блока. Их значения будут колебаться в диапазоне от —mouseY = -1, -–mouseX = -1, когда курсор находится в левом верхнем углу, до —mouseY = 1, -–mouseX = 1, когда курсор находится в правом нижнем углу (напомню, что в HTML ось X направлена слева направо, а ось Y сверху вниз, а центр координат (в нашем случае) располагается в центре блока .page-header__section).

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

Шаг 3. Отслеживание движения мыши с помощью JavaScript

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

Если эта библиотека у Вас еще не подключена, вы можете подключить ее, добавив следующую строку в секцию &lthead> или перед закрывающим тегом :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

После подключения jQuery вставляем приведенный ниже код:

        jQuery(document).ready(function () {
            //Определяем блок, внутри которого будем отслеживать движение мыши
            effectWrap = jQuery(".page-header__section");
        });
 
        //Создаем слушатель, который вызывает функцию move() каждый раз, когда пользователь двигает курсор
        document.addEventListener("mousemove", function (e) {
            move(e.clientX, e.clientY);
        });
 
        //Задаем функцию - обработчик движения мыши
        function move(x, y) {
            //Определяем координаты центра блока effectWrap
            let cX = effectWrap.offset().left + effectWrap.outerWidth() / 2,
                cY = effectWrap.offset().top + effectWrap.outerHeight() / 2;
            //Вычисляем величину коэффициента смещения курсора от центра блока (от -1 до 1)
            let pX = (x - cX) / cX;
            let pY = (y - cY) / cY;
 
            //Присваиваем полученные значения CSS переменным, если их значение находится в диапазоне -1 до 1 (курсор над областью отслеживания) и сбрасываем их в 0, если значение входит за рамки этого диапазона (курсор вне области отслеживания)
            document.body.style.setProperty('--mouseX', pX);
            document.body.style.setProperty('--mouseY', pY);
        }

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

Добавьте, приведенный выше код в ваш проект и… ву-а-ля! Все заработало, так как и планировалось :)!

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

Заключение

Надеюсь, что приведенная в статье информация будет полезна в вашей работе.

Если остались какие-то вопросы, задавайте их в комментариях, и я постараюсь оперативно на них ответить.

Желаю вам дальнейших творческих успехов!!!

До новых встреч на страницах этого блога!