Рух елемента в бік курсора на 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 &amp;lt; 0) mouseX = 0;
      // З якого моменту (координат) починати рух за курсором
      if (mouseY &amp;lt; 0) mouseY = 0;
      // Якщо курсор знаходиться поза веб-сторінки на момент завантаження, то встановить об'єкт в координатах x = 0, y = 0.
 
   });
 
   var follower = $(&quot;#follower&quot;);
   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);
   // В даному випадку це значення визначає, наскільки плавно і швидко буде відбуватися рух
});