Движение объекта в сторону курсора на 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 < 0) mouseX = 0;
// С какого момента (координат) начинать движение за курсором
	   	if (mouseY < 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);
//В данном случае это значение определяет, насколько плавно и быстро будет происходить движение
});
Демо
Вы используете блокировщик рекламы

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

Подробнее

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

Оцените нашу статью
4.09/544
Комментарии (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; // Начальные координаты объекта на момент загрузки страницы

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

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