Как сделать перемещение блока от движения мыши?

Question

[Андрей Иванов]

Приветствую! Каким образом можно написать решение, в котором будет перемещение блока в зависимости от движения мыши?

Принцип: есть блок с элементами размером > ширины экрана. При наведении мыши на примерно 1/4 экрана в правой части - двигаем блок влево. Отводим мышь - движение останавливается. Движение блока происходит до тех пор, пока не покажется конец блока (правая часть).

Тот же принцип должен быть при наведении на 1/4 экрана в левой части, только движение блока уже идет в правую часть.

Пример того, что хочу реализовать тут: https://wanda.net/directors/come-ferre/

Answer 1

[IvanU7n]

а подсмотреть там? идея простая: слушаем mousemove, если курсор в нужно части от ширины экрана, то добавляем/отнимает translate по x, который естественно где-то храним, как вариант можно не translate, а scrollLeft, если overflow: hidden

Comments

[Андрей Иванов]

Там минифированные скрипты на 900 строк кода)
В теории понимаю, что нужно, но на практике не выходит

Answer 2

[UthvfyV]

ищите в интернете свойства animation

Answer 3

[UsmanAzhigov]

Если вы хотите сделать анимацию не на нативном Js, то вот вам реакт библиотека https://github.com/atlassian/react-beautiful-dnd