Движение объекта в сторону курсора на jQuery

Вы используете блокировщик рекламы

Пожалуйста, отключите блокировщик рекламы

Подробнее

Иногда возникает необходимость отслеживать движение объекта в сторону курсора и двигать какой-нибудь объект за ним в определенной области. Ниже представлен код, который позволяет это сделать. С его помощью можно сделать крутую анимацию для сайта, например такую.

Движение объекта в сторону курсора:

html:

<div class="move-wrap">
   <div id="follower"></div>
</div>

css:

#follower{
   position : relative;
   background-color : #000;
   width:10px;
   height:10px; /* Размеры движущегося объекта */
   border-radius:50px;
}
.move-wrap {
   width:150px;
   height:150px; /* Размеры области, в которой будет двигаться объект */
   position: relative;
   overflow:hidden;
   border:1px solid #000000;
}



js:

   $(function(){
      var mouseX = 0, mouseY = 0, limitX = 150-10, limitY = 150-10;
      // Определяет границы, по которым будет двигаться объект
      $(window).mousemove(function(e){
         var offset = $('.move-wrap').offset();
         mouseX = Math.min(e.pageX - offset.left, limitX);
         mouseY = Math.min(e.pageY - offset.top, limitY);
         // Ищет координаты курсора
         if (mouseX &lt; 0) mouseX = 0;
         // С какого момента (координат) начинать движение за курсором
         if (mouseY &lt; 0) mouseY = 0;
         // Если курсор находится вне веб-страницы на момент загрузки, то установит объект в координатах x=0, y=0.
 
      });
 
      var follower = $("#follower");
      var xp = 0, yp = 0; // Начальные координаты объекта на момент загрузки страницы
      var loop = setInterval(function(){
      // Далее определяется скорость, с которой будет двигаться объект.
      // Изменить значение 20, для изменения скорости. Чем больше это значение, тем медленнее движется объект.
 
      xp += (mouseX - xp) / 20;
      yp += (mouseY - yp) / 20;
      follower.css({left:xp, top:yp});
      // Изменение позиционирования объекта с помощью css
 
   }, 10);
   //В данном случае это значение определяет, насколько плавно и быстро будет происходить движение
});
Демо
Вы используете блокировщик рекламы

Пожалуйста, отключите блокировщик рекламы

Подробнее
Вы используете блокировщик рекламы

Пожалуйста, отключите блокировщик рекламы

Подробнее

Подписывайтесь на наш Telegram канал, чтобы не пропускать наши статьи 😎

Комментарии (11)
  1. Влад 20 октября, 2017, 12:49

    Очень хороший сайт и объяснение.
    Очень не хватает демок для примеров. Сделайте их, это не так уж и сложно

    • Anton Andriyan 20 октября, 2017, 15:01

      Спасибо за отзыв и предложения!
      Ссылка на демо есть в тексте статьи, но мы сделаем более удобную кнопку 🙂

  2. Дмитрий 25 декабря, 2017, 15:24

    Единственный минус — это центровка объекта. Она происходит по начальной точке (левый верхний угол). А если объект это прямоугольная кнопка? То она будет стремиться своим левым краем, а не центром к мышке.

    • Anton An2 26 декабря, 2017, 10:46

      Да, есть такой момент. Но я писал скорее как основу, с которой уже можно играться под свои нужды. + была именно такая задача, как в демо, поэтому подумал — может кому-то пригодится 🙂

  3. Steven_R_Kirke 21 марта, 2018, 17:33

    Отличный пример. Спасибо.

    • Anton An2 21 марта, 2018, 17:34

      Всегда рад, спасибо!

  4. al 29 июля, 2018, 19:13

    А можете подсказать, для его здесь использование setInterval и по какому принципу работают (mouseX — xp) и (mouseY — yp) в
    xp += (mouseX — xp) / 20;
    yp += (mouseY — yp) / 20;
    а точнее, что это дает?

    • Anton An2 29 июля, 2018, 21:27

      setInterval — в данном случае это значение определяет, насколько плавно и быстро будет происходить движение. Дает небольшую задержку перед вычислениями новых координат.

      В данном случае (mouseX — xp) и (mouseY — yp) вычисляет координаты курсора = текущей координате — координате, что была 0,01 секунду назад. Это формула для более плавного перемещения. Я думаю, что можно придумать другую формулу расчета.

      • al 30 июля, 2018, 10:21

        Спасибо!

      • al 30 июля, 2018, 10:39

        А можно избежать момента, когда бэкграунд и картинка скачут при обновлении страницы или вывода курсора с одной стороны и ввода с другого?

        • Anton An2 14 августа, 2018, 16:13

          Картинка и бекграунд скачут из-за того, что они в этот момент загружаются — тут или использовать кэш или уменьшать размер изображений.
          Насчет курсора не совсем понял, может быть изменить начальные координаты?
          var xp = 0, yp = 0; // Начальные координаты объекта на момент загрузки страницы

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

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