Как сделать анимацию/движение элемента за курсором?

Question

[Антон]

Накидал пример, что у меня получилось на данный момент: https://codepen.io/a22432/pen/vYbEzEE
Как сделать, чтобы элемент (в примере .block) смещался по оси X и не выходил за пределы родительского элемента (в примере .conteiner)?
Или может где-то есть пример, где посмотреть можно.

Исправил: https://codepen.io/a22432/pen/NWoPZMN

Comments

[imko]

В икс записывать просто значение ограниченное позицией края контейнера и размером блока

Answer 1

[Sergey]

Codepen

let block = document.querySelector('.block');
let conteiner = document.querySelector('.conteiner');

let movecircle = function (e) {
  let { clientX } = e;
  let x = Math.round((clientX / window.innerWidth) * 100);
  let smechenie = block.scrollWidth * (x / 100);
  block.style.setProperty('--x', `${x}%`);
};

['mousemove','pointermove'].forEach( e => 
    window.addEventListener(e, movecircle, false)
);

Comments

[Антон]

Спасибо Sergey!!!
Изучу Ваш код!
Пока я сделал так, тоже работает)
https://codepen.io/a22432/pen/NWoPZMN

Answer 2

[Stalker_RED]

Слушайте mousemove на container, а не на window

Comments

[Антон]

Спасибо за вариант. Немного не то, мне надо отслеживать событие mousemove на всей странице, а не в блоке container

[Stalker_RED]

Антон, тогда по mouseout из контейнера останавливайте движение