Слежение за курсором

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

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); //В данном случае это значение определяет, насколько плавно и быстро будет происходить движение
});
😡
☹️
😐
☺️
😍
3.86/5☺️7
ДемоИсходники

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

Ваш e-mail не будет опубликован.