JS / Скорость и направление прохождение курсора над объектом?

Question

Подскажите, пожалуйста, как можно "считывать" скорость с которой пользователь провел курсором, над объектом ? Приведу простой пример

var block = document.querySelector("#block"),
  value = document.querySelector("#value");

block.onmousemove = function(event) {
  value.innerHTML = event.target;
};

body {
  height: 100%;
  margin: 0;
}

#block {
  width: 184px;
  height: 184px;
  border: 1px solid red;
}

<div id="block">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184 186"><path d="M92 0l92 93-92 93L0 93 92 0z" fill="#13ff74"/><path d="M92 93h92l-92 93L0 93h92z" fill="#00bb75"/><path d="M92 0v186L0 93 92 0z" fill="#00c178"/><path d="M48.8 93H92v93L0 93h48.8z" fill="#009169"/><path d="M92 34.4L150.7 93 92 151.6 33.3 93 92 34.4z"/></svg>
</div>
<p id="value"></p>

Как узнать с какой скоростью, и в каком направлении (справа налево, или слева направо) над #block провели курсором мыши ?

Answer 1

Так?

var block = document.querySelector("#block");
var speed = 0;
var value = 0
var lastX = 0
document.body.onmousemove = function(event) {
  speed = lastX - event.x;
  lastX = event.x
};

requestAnimationFrame(draw)

function draw(){
  value += speed;
  speed *= 0.9;
  block.style.transform = `rotatey(${value}deg)`;
  requestAnimationFrame(draw);
}

body {
  height: 100%;
  margin: 0;
  perspective: 1000px;
}

#block {
  width: 184px;
  height: 184px;
  border: 1px solid red;
}

<div id="block">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184 186">

  <path d="M92 0l92 93-92 93L0 93 92 0z" fill="#13ff74"/><path d="M92 93h92l-92 93L0 93h92z" fill="#00bb75"/><path d="M92 0v186L0 93 92 0z" fill="#00c178"/><path d="M48.8 93H92v93L0 93h48.8z" fill="#009169"/><path d="M92 34.4L150.7 93 92 151.6 33.3 93 92 34.4z"/>

  </svg>
</div>

БЛОГ НА HUSL

JS / Скорость и направление прохождение курсора над объектом?

Ответы (1 шт):