Как реализовать увеличение элемента(ов), при приближении курсора?

Question

[Дмитрий Винокуров]

Нужно увеличивать (не ховер) в близи курсора.

Comments

[Kovalsky]

https://jsfiddle.net/lucifer63/41y3qdu9/

Answer 1

[Дмитрий Винокуров]

Если кому интересно как реализовал:
1 - вешаю реф и записываю в глобальный стейт координаты по центру элемента (компоненты знают где они находятся по осям x,y)
2 - пропсами кидаю координаты мыши относительно родителя (теперь компоненты знают где курсор);
3 - Установил размер максимального увеличения и минимальное расстояние для срабатывания.
4 - Увеличиваю размер в процентном соотношении, от растояния ( например максимальное увеличение W и H 50px,
расстояние срабатывания 80 - это 0% , а в центре это 100%)

как-то так

Answer 2

[stepa90]

Не совсем понятно чем ховер не устроил, но можно использовать события наведения мыши.

Comments

[Дмитрий Винокуров]

Это не подойдет. Надо реализовать увеличение при приближении (чем ближе курсор к элементу, тем он больше)

[stepa90]

Дмитрий Винокуров, тогда нужно определять позицию элемента на странице относительно окна браузера и на mousemove событии(например навешать его на body) рассчитывать расстояние до элемента.
Но!

Событие mousemove происходит при движении мыши. Однако, это не означает, что указанное событие генерируется при прохождении каждого пикселя.

Т. е. нужно в css задать transition на изменение размера.