Как сделать кнопку, которая сразу стоит на месте, но если на нее навести и попробовать увести в сторону, то кнопка пойдет за мышкой, вот пример на сайте(белая кнопка со стрелочкой): https://www.m-trust.co.jp/.
2 ответа
Как-то так.
offset
это расстояние от центра элемента, при котором будет происходить "разрыв" примагничивания.
let offset = 50, cur = false;
document.body.addEventListener('mouseenter', function(e) {
if(e.target.classList.contains('magnetic') && cur === false) {
cur = {
e: e.target,
x: e.target.getBoundingClientRect().left,
y: e.target.getBoundingClientRect().top
};
}
}, true);
document.addEventListener('mousemove', function(e) {
if(cur !== false) {
let x = (e.clientX - cur.x) - (cur.e.getBoundingClientRect().width / 2),
y = (e.clientY - cur.y) - (cur.e.getBoundingClientRect().height / 2);
cur.e.style.transform = `translate(${x}px,${y}px)`;
//
if(Math.abs(x) >= offset || Math.abs(y) >= offset) {
cur.e.style.transform = 'translate(0,0)';
cur = false;
}
}
});
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
margin: 0;
}
.magnetic {
transition: transform .2s linear;
}
<button class="magnetic">Magnet button</button>
Ответ скопирован с вопроса Как реализовать такую кнопку, чтоб она следовала за курсором, когда мышь рядом? [закрыт]
Почитай про MouseEvent client Property, MouseEvent screen Property и MouseEvent offset Property
Пример:
let x = event.screenX; //достает положение мышки относительно экрана
let y = event.screenY;
let cord = "X: " + x + ", Y: " + y;