Рух елемента в бік курсора на 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);
// В даному випадку це значення визначає, наскільки плавно і швидко буде відбуватися рух
});
Demo
Оцініть нашу статтю
😡
☹️
😐
☺️
😍
3.78/5☺️27
Comments (0)
Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *