5

Есть круг, нужно чтобы он всегда поворачивался по направлению к курсору.

Как это реализовать?

Например, есть большой с маленьким кругом:

.circle
{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightblue;
}
.indicator
{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: darkblue;
  position: absolute;
  left: 80px;
  top: 50px;
}
<div class = "circle" name = "circle"><div class = "indicator" name = "indicator"></div></div>

Как сделать чтобы большой поворачивался с маленьким как индикатор по направлению к курсору?

4

4 ответа 4

11

За основу был взят старый-старый скрипт, но он рабочий, так что вот.

var elem = $('.indicator');
var x1 = elem.offset().left,
  y1 = elem.offset().top;
var r = 35,
  x, y, isProcessed = false;
$('html').mousemove(function(e) {
  if (!isProcessed) {
    isProcessed = true;
    var x2 = e.pageX,
      y2 = e.pageY;
    y = ((r * (y2 - y1)) / Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))) + y1;
    x = (((y - y1) * (x2 - x1)) / (y2 - y1)) + x1;
    elem.css({
      marginTop: (y - y1 + 1) + 'px',
      marginLeft: (x - x1) + 'px'
    });
    isProcessed = false;
  }
});
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightblue;
  position: relative;
  margin: 30px auto;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: darkblue;
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="circle" name="circle">
  <div class="indicator" name="indicator"></div>
</div>

2
  • Спасибо!!!!!!!!
    – Ver Nick
    23 сен 2018 в 11:36
  • Сейчас можно проще :)
    – Qwertiy
    23 сен 2018 в 14:56
8

$(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);
//В данном случае это значение определяет, насколько плавно и быстро будет происходить движение
});
#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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="move-wrap">
  <div id="follower"></div>
</div>

2
  • 4
    Хороший пример, но между "вращением по направлению к курсору" и "движением по направлению к курсору" есть очень большая разница
    – Alex Krass
    28 янв 2018 в 0:17
  • Можно оживить немного тему? Подскажите пожалуйста как совместить пример, там где, крутится окружность с градиентом за мышкой с последним примером, где плавно двигается шарик за мышкой. Как сделать, чтоб окружность с градиентом плавно вращалась за курсором мышки? 3 июн 2020 в 12:38
5

Центр пересчитывается каждый раз чтобы при скролле было актуальное положение. Возможно, можно что-то немного изменить, чтобы только один раз его просчитать.

document.addEventListener('mousemove', function (event) {
  var div = document.querySelector(".circle");
  var bb = div.getBoundingClientRect();
  var cx = bb.left + bb.width / 2, cy = bb.top + bb.height / 2;
  var angle = Math.atan2(event.y - cy, event.x - cx);
  
  div.style.transform = "rotate(" + angle + "rad)"
})
body {
  margin: 3em;
}

.circle
{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right, green, blue);
  position: relative;
  transform-origin: center;
}
.indicator
{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 80px;
  top: 45px;
}
<div class="circle"><div class="indicator"></div></div>

3
  • Отлично, так будет быстрее
    – Ver Nick
    23 сен 2018 в 14:58
  • Можно оживить немного тему? Подскажите пожалуйста как совместить пример, там где, крутится окружность с градиентом за мышкой с последним примером, где плавно двигается шарик за мышкой. Как сделать, чтоб окружность с градиентом плавно вращалась за курсором мышки? 3 июн 2020 в 12:38
  • @OdiseuOdiseu, хотел предложить transition, но получается полная жесть. Значит руками через углы.
    – Qwertiy
    3 июн 2020 в 14:54
5

Автор: Stranger in the Q

JSFIDDLE

class rotationOfTheObjectTowardsTheCursor {

	constructor() {
		this.circle = Object;
		this.line = Object;
		
		this.circleRect = Object;
		
		this.centerPosition = { x: 0, y: 0 };
		this.angels = { actual: 0, target: 0 };
		
		this.init();
	}
	
	init() {
		this.circle = document.querySelector('.circle');
		this.line = document.querySelector('.line');
		
		this.onResize();
		window.onresize = (e) => this.onResize(e);
		
		window.onmousemove = (e) => this.onMouseMove(e);
		
		requestAnimationFrame(() => this.loop());
	}
	
	onResize() {
		this.circleRect = this.circle.getBoundingClientRect();
		this.centerPosition = {
			x: this.circleRect.x + this.circleRect.width / 2,
			y: this.circleRect.y + this.circleRect.height / 2,
		};
	}
	
	onMouseMove(e) {
		const atan2 = Math.atan2(
			e.pageY - this.centerPosition.y,
			e.pageX - this.centerPosition.x
		);
		
		this.angels.target = atan2;
	}
	
	loop() {
		this.angels.actual = this.angleLerp(
			this.angels.actual,
			this.angels.target,
			0.1
		);

		this.line.style.transform = `rotate(${this.angels.actual}rad)`;

		requestAnimationFrame(() => this.loop());
	}
	
	angleLerp(a0, a1, t) {
		const max = Math.PI * 2;
		const da = (a1 - a0) % max;
		return a0 + (((2 * da) % max) - da) * t;
	}

}

new rotationOfTheObjectTowardsTheCursor();
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightblue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.line {
	width: 40%;
	height: 1px;
	background-color: red;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: rotate(30deg);
	transform-origin: left;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: darkblue;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-50%);
}
<div class="circle">
	<div class="line">
		<div class="dot"></div>
	</div>
</div>

1
  • Спасибо, с ускорением и замедлением выглядит прекрасно.
    – Ver Nick
    4 июн 2020 в 7:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.