Поиск
Close this search box.
Поиск
Close this search box.

1 июля, 2023

Вращение элемента при наведении курсора

Привет, друзья! В этой статье мы покажем, как сделать Вращение элемента при наведении курсора при помощи JQuery. Все примеры буду приводиться с использованием Elementor Page Builder. Рассмотрим применение данного эффекта на примере обычной иконки.

Итак, для начала добавим на страницу редактора виджет “Иконка”. Позиционирование настройте на свое усмотрение, я отцентровал иконку по центру.

Вращение элемента при наведении курсора

Присвоим иконке id = “myObject” (можете присвоить любой id).

Вращение элемента при наведении курсора

Затем добавим на страницу “html-виджет” и вставим в него js-скрипт, представленный ниже.

вращение элемента при наведении
<script>
$(document).ready(function() {
  // получаем объект, который нужно вращать
  var obj = $("#myObject");

  // устанавливаем начальный угол поворота
  var angle = 0;

  // задаем скорость вращения
  var speed = 5;

  // устанавливаем функцию-обработчик для события наведения мыши
  obj.mouseenter(function() {
    // запускаем таймер, который будет каждые 50 миллисекунд изменять угол поворота объекта
    rotateTimer = setInterval(function() {
      angle += speed;
      obj.css({ transform: 'rotate(' + angle + 'deg)' });
    }, 50);
  });

  // устанавливаем функцию-обработчик для события убирания мыши
  obj.mouseleave(function() {
    // останавливаем таймер вращения объекта
    clearInterval(rotateTimer);
  });
});
</script>

В коде нет подключения JS, так как мы подключили его глобально в настройках пользовательского кода Elementor. Как подключить JS на страницу можете посмотреть в этой статье.

Смотрим на результат! Вращение при наведении на элемент работает)

Пример “Вращение элемента при наведении на JQuery”.

Большое спасибо за внимание! Теперь вы сможете сделать вращение элемента при наведении на него. Код выше универсальный и может быть использован на любом сайте!

Уникальные тексты и изображения
с помощью
Искусственного Интеллекта
на русском языке.

Перейдите в Telegram и возьмите бесплатный пакет символов для тестирования сервиса
10 000 символов бесплатно!

0

Интересные статьи

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.