ПАРАЛЛАКС-ЭФФЕКТ ПРИ НАВЕДЕНИИ КУРСОРА НА КОМПОНЕНТ ВЕБ-САЙТА

PARALLAX EFFECT ON WEBSITE COMPONENT CURSOR HOVER

Maxim Beryanov

Student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

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

ABSTRACT

Due to the prevalence of websites and incredible number of design decisions, it is difficult not only to surprise the user, but also to diversify the website itself. However, there can be an interesting solution like interaction with user through mouse cursor movement, for example, a parallax effect when hovering over a web page object, that is, its movement relative to the location of the cursor, the implementation of which will be discussed in this article.

Ключевые слова: web, параллакс, HTML, JavaScript.

Keywords: web, parallax, HTML, JavaScript.

Для реализации подобного поведения в данной статье обойдемся простой связкой JavaScript [1] + HTML [2] без использования сложных библиотек вроде React.JS (рисунок 1).

Рисунок 1. Код и стили параллакс-карточки

Как мы можем увидеть, на контейнер карточки накладывается две функции-обработчика – onMouseMove по событию движения курсора мыши и onMouseLeave – по событию выхода курсора за пределы контейнера карточки. Данные функции подключаются из отдельного JavaScript-файла (рисунок 2). По наведению курсора на контейнер рассматриваемого для добавления эффекта параллакса контейнера, вычисляются координаты смещения курсора внутри контейнера (поля вокруг него не учитываются), и по некоторой градации вычисляется степень поворота по X и Y координатам.

Рисунок 2. Функции изменения стиля transform

Перефразируя, если координата курсора лежит в диапазоне от 0% до 25%, 25%-50%, 50%-75%, 75%-100% ширины / высоты, то соответственно вычисляется и поворот (наклон) с некоторой увеличивающейся степенью. При выходе курсора за пределы контейнера данный эффект сбрасывается возвращением свойства transform [3] в значение по умолчанию. Анимация компонента реализуется через поле transition [4] – каждое изменение transform будет плавным и анимированным в соответствии с определенным временным промежутком. Конечный результат можно увидеть на рисунке 3.

Рисунок 3. Параллакс-эффект при наведении курсора

Таким образом, благодаря изменению CSS-свойства transform с некоторыми значениями rotateX и rotateY (в градусах), имеется возможность создавать представленный выше эффект параллакса для разнообразия сайта.

Список литературы:

1. JavaScript [Электронный ресурс] URL: https://www.javascript.com (дата обращения: 03.01.2023).
2. Книга по HTML [Электронный ресурс] URL: http://htmlbook.ru (дата обращения: 03.01.2023).
3. CSS Transform [Электронный ресурс] URL: https://developer.mozilla.org/ru/docs/Web/CSS/transform (дата обращения: 03.01.2023).
4. CSS Transition [Электронный ресурс] URL: https://html5book.ru/css3-transition (дата обращения: 03.01.2023).