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

Question

[deantek]

Нашел вот такой референс
гиф с примером
хотел сделать подобное, но не совсем понимаю как, в голове есть идея высчитывать ширину и высоту контейнера кнопки, а после отслеживать само движение мыши, но не знаю правильно это или нет

Answer 1

[Ivan Bogachev]

в голове есть идея высчитывать ширину и высоту контейнера кнопки, а после отслеживать само движение мыши, но не знаю правильно это или нет

Эффект определенно зависит от расположения мыши, расположения кнопки, и, возможно, от ее размеров. Так в чем проблема начать и посмотреть, что будет?

Тут весь вопрос в том, чтобы подобрать нужную функцию от расстояния (в примере синус - самый простой вариант, хотя и не самый интересный). И определиться, будет ли эффект зависеть от расстояния до центра элемента (как в примере) или от расстояния до края кнопки. От этих выборов будет зависеть конечный эффект. Там долго можно играться с функцией и параметрами, но направление должно быть понятно.

Comments

[deantek]

спасибо большое, буквально только что сидел игрался с кнопкой, сделал что-то похожее, но не совсем верное, ваш вариант идеально подходит

[Recreator]

можно как-то так: