Анимация контейнера с изображением при наведении мыши с использованием перспективы и преобразования

Анимация контейнера с изображением при наведении мыши с использованием перспективы и преобразования

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

Вот окончательная версия:

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

Настройка

Во-первых, нам нужен контейнер с еще одним внутренним элементом. Контейнер поможет нам с перспективой.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Это дает нам белую карточку, расположенную прямо в центре светло-серого фона. Обратите внимание, что мы установили перспективу для #container на 40px, это пока ничего не делает, потому что мы не создали никаких преобразований. Это будет рассмотрено позже в разделе JavaScript.

Давайте начнем писать скрипты

Вот, что мы делаем:

И вот, что все эти вещи делают (или будут делать):

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

Функция обновления: мы еще не создали ее, но целью этой фуекции будет обновление 3D-вращения нашего #inner div.

Функция времени для обновления: это еще одна функция, которую мы еще не создали, но она возвращает значение true, когда потребуется обновление. Это способ уменьшить количество вызовов функции update() и повысить производительность скрипта.

Событие: это объект JavaScript, который описывает событие, которое произошло.

Вышеприведенный код:

Обновляет 3D-поворот #inner div, как только мышь входит в контейнер.

Обновляет 3D-поворот #inner div, когда наступит соответствующее время — когда мышь перемещается по контейнеру.

Сбрасывает стиль #inner div, когда мышь покидает контейнер.

Пришло время для обновления?

Давайте добавим функцию, которая решает, когда нужно обновить 3D-поворот div #inner.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Когда counter достигнет updateRate, будет выполнено обновление. На этом этапе вы можете попробовать заменить функцию обновления на console.log() и поэкспериментировать с updateRate, чтобы увидеть, как все это работает.

Мышь

Далее нам нужен объект мыши. Это немного сложнее. Тем не менее, это не так сложно понять, но код может показаться пугающим, особенно если вы новичок в JavaScript.

Опять же, давайте разберем этот код:

show(): отображает текущую позицию мыши (если вы хотите выполнить некоторую отладку в консоли браузера).

setOrigin(e): Устанавливает координаты (0,0) для нашего объекта мыши в центре элемента (e).

updatePosition(): обновляет текущую позицию нашего объекта мыши относительно (0,0).

Последняя строка кода ouse.setOrigin(container) привязывает координаты (0,0) нашего объекта мыши к центру контейнера. Вот пример, который иллюстрирует это.

Идея состоит в том, чтобы добавить дополнительное вращения для #inner div, когда вы перемещаете мышь дальше от центра контейнера.

Обновляем стили для позиции мыши

Вот функция обновления:

update(): обновляет положение мыши и стиль #inner div.

updateTransformStyle(): обновляет стиль для каждого вендорного префикса.

Мы закончили?

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

А, верно! Мы указали ему обновлять вращение #inner div каждый раз, когда счетчик достигает updateRate. Это создает неуклюжий переход между обновлениями. Как мы это решим? Переходы CSS.

Добавление переходов

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

Обратите внимание, что изменение размера страницы приведет к некоторым проблемам, так как изменяется позиция контейнера на странице. Решение состоит в том, чтобы повторно отцентрировать объект мыши в контейнере после изменения размера страницы.

Заключение

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

Автор: Mihai Ionescu

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree